{"componentChunkName":"component---src-templates-post-js","path":"/blog/setup-cdn-for-npm-and-gh","webpackCompilationHash":"0f979b9b09e9513b4912","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"🪂 手动搭建一个 jsDeliver","tips":[],"categories":["code"],"datetime":"2023-10-17 14:17:56","noFooter":false,"description":"jsDeliver 是一个非常棒的CDN托管服务，但是因为不可名状的原因很早之前就从稳定到不稳定，最终肯定也是稳定的不能用了。觉得整个体验很好，尤其是托管机制非常好玩，这里尝试做一个类似的东西，可以拿来进一步增强小的页面级应用开发体验。","plainTextDescription":"jsDeliver 是一个非常棒的CDN托管服务，但是因为不可名状的原因很早之前就从稳定到不稳定，最终肯定也是稳定的不能用了。觉得整个体验很好，尤其是托管机制非常好玩，这里尝试做一个类似的东西，可以拿来进一步增强小的页面级应用开发体验。\n","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='92'%3e%3cpath%20d='M0%2015l1%2016v1L0%2061c0%2027%200%2029%202%2028l8-1-6%202c-4%202-4%202%2010%202l14-1%201-2c0-2-1-2-9-2-5%200-8%200-7-1v-3l-1-1c1-1%2022-2%2024%200s12%201%2026%200c7-1%207-2%206-4-1-1-1-1-3%201-1%201-2%201-2-2l-2-7c-2-2-2-4%201-5l1-3-1-2-2-1c-2-1-2-1%201-1%205%200%207-3%209-10%201-6%205-9%208-5%200%201%202%202%205%202%205%200%209%202%2014%207%204%204%204%204%202%203-3%200-3%202%200%205%201%202%206%203%205%201-1-1%201-5%202-5l3-2%204-2%204-2%205-3c3-1%204-3%201-2l-1-3%202-3v2l1%202%202%201c2%201%202%201%203-2%202-3%203-2%202%203%200%202%204%204%205%203l4-1%203-1%204-2%206-3c2-1%202-1%200-3h-4l-5-1c-2-1-5-2-6-1l-3-1-3-5-3-4%202-2%203-4%201-2v-3c0-2-1-2-2%202-2%204-2%204-3%202l4-10%204-9H0v15M298%201c0%202%202%209%205%2011%202%203%201%203-2%201s-4-3-5-1l-5-1c-3-2-4-2-5-1-3%204-3%205-4%203%200-2-2-1-6%202-7%204-13%2016-9%2018l1%205c1%204%203%206%203%203h1l5%202c3%200%204%200%204-2h1c2%203%203%202%202%200v-2l1-1v-3h5c-1%201%202%201%206%201l7%201h-15l5%202c5%201%205%201%202%201l-4%202c-1%202-1%204%201%204l2%202h4c0%201%201%202%203%202%202-1%204%200%204%201h3c0-3%203-1%204%201%200%202%200%202%202%201%201-1%201-1%201%201%200%204%203%205%206%202l5-1c5%201%206%202%203%202l-3%201h3c3%200%203%202%200%202-2%201-2%201%200%202l1%201%201%202%202%203c-1%200-5-2-4-3l-1-1c-1%201-5%200-7-3-2-2-3-1-3%202l2%202%201%202%201%201%204%202%203%201h2c0%202%202%201%202-1l1-2c2%200%201%206-1%207l-2%201h2l4%201%203%202%203%201%206%201c5%200%206%200%206-2s0-2%202-1l4%202c2%200%202%200%201%201s-1%201%201%201l3-1h1l1%201%201-2%201-3c1%200%205%203%204%204l-2-1-2-1%201%202%208%202%207%201-1%201c-5-1-23%200-23%201l7%201c7-1%209%200%204%201l-6%202-4%202h9c9%200%2010%200%2010-2l2-3c2-1%202-1%202%202l-1%203h8c7%200%207%200%207-2l-1-3v-1l1-44V0h-51l-51%201M19%2045c-2%202-2%202-3%201-2-3-4-2-4%202%200%202%200%202%205%202%207%201%2011%202%2014%207l4%203v2l1%202v1l1-2h8l4-1c4-1%204-3%200-4l-3-2%202-2c4-3%204-4%201-3l-3-1-1-1-2%201c0%202-2%201-3-1l-1-1-1%202c1%201-1%202-2%200h-1l-1-1-1-1-3-2c-4-4-8-5-11-1'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/0979f/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/9e575/banner.jpg 500w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/79449/banner.jpg 1000w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/0979f/banner.jpg 1920w","srcWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/14e3c/banner.webp","srcSetWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/7fe04/banner.webp 500w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/d619e/banner.webp 1000w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/14e3c/banner.webp 1920w","sizes":"(max-width: 1920px) 100vw, 1920px"}}},"bannerCredit":null,"slug":"/blog/setup-cdn-for-npm-and-gh","tags":["writing","CDN","npm"]},"headings":[{"value":"一、jsDeliver 分析","depth":2},{"value":"1. 为什么好用","depth":3},{"value":"2. 使用语法","depth":3},{"value":"3. 为什么无法使用","depth":3},{"value":"二、实现方案","depth":2},{"value":"1. 系统架构设计","depth":3},{"value":"2. 核心功能模块","depth":3},{"value":"a. 主服务","depth":4},{"value":"a. NPM 部分的解析和存储","depth":4},{"value":"b. gh 部分的解析和服务","depth":4},{"value":"3. 部署方案","depth":3},{"value":"想让读者了解的事情","depth":2}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"setup-cdn-for-npm-and-gh\",\n \"title\": \"🪂 手动搭建一个 jsDeliver\",\n \"date\": \"2023-10-17 14:17:56\",\n \"author\": \"Ubug\",\n \"description\": \"jsDeliver 是一个非常棒的CDN托管服务，但是因为不可名状的原因很早之前就从稳定到不稳定，最终肯定也是稳定的不能用了。觉得整个体验很好，尤其是托管机制非常好玩，这里尝试做一个类似的东西，可以拿来进一步增强小的页面级应用开发体验。\",\n \"categories\": [\"code\"],\n \"tags\": [\"writing\", \"CDN\", \"npm\"],\n \"banner_icon\": \"🚏\",\n \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"p\", null, \"\\u4E3B\\u8981\\u662F\\u60F3\\u5206\\u4EAB\\u4E00\\u4E2A\\u53EF\\u7528\\u670D\\u52A1\\u7684\\u7B80\\u5355\\u5B9E\\u73B0\\uFF0C\\u5F88\\u591A\\u7684\\u5927\\u9879\\u76EE\\u770B\\u8D77\\u6765\\u5F88\\u590D\\u6742\\uFF0C\\u60F3\\u8981\\u642D\\u8D77\\u6765\\u4E5F\\u975E\\u5E38\\u4E0D\\u5207\\u5B9E\\u9645\\uFF0C\\u4F46\\u662F 80% \\u7684\\u7A33\\u5B9A\\u6027\\u5B9E\\u73B0 80% \\u7684\\u529F\\u80FD\\u4E5F\\u5E76\\u4E0D\\u662F\\u4E0D\\u80FD\\u5C1D\\u8BD5\\u3002\"), mdx(\"hr\", null), mdx(\"p\", null, \"\\u4E2A\\u4EBA\\u7684\\u5C0F\\u9879\\u76EE\\u4E2D\\u5F88\\u591A\\u5730\\u65B9\\u90FD\\u4F1A\\u7528\\u5230\\u5404\\u79CD\\u5E93\\uFF0CNPM \\u7684\\u5E93\\u66F4\\u662F\\u4EB2\\u5207\\uFF0C\\u4EE5\\u524D\\u722A\\u673A\\u65F6\\u4EE3\\u6709\\u5F88\\u591A\\u514D\\u8D39\\u7684 CDN \\u53EF\\u4EE5\\u767D\\u5AD6\\uFF0C\\u5927\\u5382\\u5C0F\\u5382\\u90FD\\u89C9\\u5F97\\u516C\\u5171 CDN \\u7684\\u6258\\u7BA1\\u8FD8\\u80FD\\u5E2E\\u52A9\\u63D0\\u9AD8\\u7528\\u6237\\u4F53\\u9A8C\\uFF0C\\u5F3A\\u7F13\\u5B58\\u7684\\u7B56\\u7565\\u5E94\\u8BE5\\u6210\\u672C\\u53EF\\u63A7\\u3002\\u4F46\\u662F\\u73B0\\u5728\\u8D8A\\u6765\\u8D8A\\u591A\\u7684\\u6258\\u7BA1\\u65B9\\u5220\\u5E93\\u8DD1\\u8DEF\\uFF0C\\u518D\\u52A0\\u4E0A\\u4E91\\u670D\\u52A1\\u7684 CDN \\u7684\\u5F88\\u597D\\u4F53\\u9A8C\\uFF0C\\u6162\\u6162\\u7684\\u90FD\\u4E0D\\u505A\\u516C\\u5171 CDN \\u7684\\u6258\\u7BA1\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u73B0\\u5728\\u4E91\\u670D\\u52A1\\u4E0A\\u9762\\u7684 CDN\\u3001\\u8FB9\\u7F18\\u8BA1\\u7B97\\u5DF2\\u7ECF\\u5F88\\u6210\\u719F\\u4E86\\uFF0C\\u57FA\\u672C\\u4E0A\\u914D\\u4E2A\\u6E90\\u7AD9\\u5C31\\u80FD\\u76F4\\u63A5\\u4E0A\\u7EBF\\u4F7F\\u7528\\u4E86\\uFF0C\\u6781\\u5927\\u7684\\u63D0\\u9AD8\\u4E86\\u73B0\\u5728\\u751F\\u4EA7\\u73AF\\u5883\\u7684\\u53EF\\u7528\\u6027\\uFF0C\\u66F4\\u7A33\\u5B9A\\u3001\\u53EF\\u5B9A\\u5236\\u3001\\u7B80\\u5355\\u6613\\u7528\\u3002\\u4E0D\\u8FC7\\u4ECA\\u5929\\u8BB2\\u7684\\u4E0D\\u662F\\u9759\\u6001\\u8D44\\u6E90\\u7684\\u5206\\u53D1\\u6280\\u672F\\u67B6\\u6784\\uFF0C\\u800C\\u662F\\u901A\\u7528\\u8D44\\u6E90\\u5C24\\u5176\\u662F\\u516C\\u5171\\u5E93\\u7684\\u7EBF\\u4E0A\\u6258\\u7BA1\\u7684\\u53EF\\u884C\\u6027\\uFF0C\\u6BD5\\u7ADF\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u7684\\u5206\\u79BB\\uFF0C\\u4E5F\\u80FD\\u964D\\u4F4E\\u90E8\\u7F72\\u73AF\\u8282\\u7684\\u6253\\u5305\\u548C\\u5206\\u53D1\\u6210\\u672C\\u3002\"), mdx(\"p\", null, \"\\u9488\\u5BF9\\u8FD9\\u4E9B\\u516C\\u5171\\u5E93\\uFF0C\\u5728 jsDeliver \\u80FD\\u7528\\u7684\\u65F6\\u5019\\uFF0C\\u5728\\u4E00\\u4E9B\\u9879\\u76EE\\u4E2D\\u5C1D\\u8BD5\\u4F7F\\u7528\\u4E86\\u4E0B\\uFF0C\\u4F53\\u9A8C\\u8FD8\\u662F\\u4E0D\\u9519\\u7684\\uFF0C\\u4E0D\\u9700\\u8981\\u624B\\u52A8\\u8003\\u8651\\u5E93\\u7684\\u90E8\\u7F72\\u548C\\u53EF\\u7528\\u6027\\u95EE\\u9898\\u3002\\u53EF\\u60DC\\u7684\\u662F\\u73B0\\u5728\\u51E0\\u4E4E\\u6CA1\\u6709\\u653E\\u5FC3\\u514D\\u8D39\\u3001\\u597D\\u7528\\u3001\\u80FD\\u7528\\u7684\\u6258\\u7BA1\\u5E93\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u73B0\\u5728\\u5C1D\\u8BD5\\u505A\\u4E00\\u4E0B\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"jsDeliver\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u4E3A\\u4EC0\\u4E48\\u597D\\u7528\\uFF0C\\u89E3\\u51B3\\u4E86\\u4EC0\\u4E48\\u95EE\\u9898\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u8BED\\u6CD5\\u662F\\u600E\\u4E48\\u6837\\u7684\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u6211\\u4EEC\\u5982\\u679C\\u8981\\u5B9E\\u73B0\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u9700\\u8981\\u8003\\u8651\\u54EA\\u4E9B\\u95EE\\u9898\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"parseUrl \\u5230 \\u6587\\u4EF6\\u7684\\u6620\\u5C04\\u903B\\u8F91\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5305\\u7684\\u7F51\\u7EDC\\u548C\\u5B58\\u50A8\\u95EE\\u9898\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u7EDF\\u4E00\\u7684\\u5B9E\\u73B0\\u548C\\u7BA1\\u7406\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u767D\\u540D\\u5355\\u5236\\u5EA6\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u56DE\\u6E90\\u548C\\u9884\\u70ED\\u673A\\u5236\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u4E0A\\u751F\\u4EA7\\u9700\\u8981\\u6CE8\\u610F\\u4EC0\\u4E48\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"CDN\\u6E90\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u7A33\\u5B9A\\u6027\\u548C\\u53EF\\u7528\\u6027\\u6D4B\\u8BD5\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u7F13\\u5B58\\u548Cnginx\\u547D\\u4E2D\\u7B56\\u7565\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u6548\\u7387\\u548C\\u9884\\u70ED\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"fallback \\u548C\\u544A\\u8B66\")))), mdx(\"h2\", null, \"\\u4E00\\u3001jsDeliver \\u5206\\u6790\"), mdx(\"h3\", null, \"1. \\u4E3A\\u4EC0\\u4E48\\u597D\\u7528\"), mdx(\"p\", null, \"jsDeliver \\u4E4B\\u6240\\u4EE5\\u597D\\u7528\\uFF0C\\u4E3B\\u8981\\u89E3\\u51B3\\u4E86\\u4EE5\\u4E0B\\u95EE\\u9898\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"npm\\u548CGitHub\\u8BED\\u6CD5\"), \"\\uFF1A\\u81EA\\u52A8\\u540C\\u6B65 NPM \\u548C GitHub \\u7684\\u5BF9\\u5E94\\u7248\\u672C\\u548C\\u6587\\u4EF6\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"HTTPS \\u652F\\u6301\"), \"\\uFF1A\\u9ED8\\u8BA4\\u652F\\u6301 HTTPS\\uFF0C\\u5B89\\u5168\\u6027\\u6709\\u4FDD\\u969C\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u7F13\\u5B58\\u7B56\\u7565\"), \"\\uFF1A\\u667A\\u80FD\\u7F13\\u5B58\\uFF0C\\u51CF\\u5C11\\u91CD\\u590D\\u8BF7\\u6C42\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"API \\u7B80\\u5355\"), \"\\uFF1ACDN URL \\u76F4\\u63A5\\u5BF9\\u5E94 NPM \\u5305\\u5730\\u5740\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u65E0\\u9700\\u5173\\u5FC3\"), \"\\uFF1A\\u4E0D\\u9700\\u8981\\u5173\\u5FC3\\u8DEF\\u7531\\u548C\\u90E8\\u7F72\\uFF0C\\u4E00\\u4E2AURL\\u5C31\\u80FD\\u5BF9\\u5E94\\u5177\\u4F53\\u6587\\u4EF6\")), mdx(\"p\", null, \"\\u8FD9\\u6837\\u7684\\u7B56\\u7565\\uFF0C\\u8BA9\\u5728\\u524D\\u7AEF\\u5F00\\u53D1\\u4E2D\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7\\u6807\\u7B7E\\u6216\\u5F15\\u7528\\u76F4\\u63A5\\u4F7F\\u7528\\uFF0C\\u4E0D\\u5FC5\\u64CD\\u5FC3\\u6587\\u4EF6\\u4ECE\\u54EA\\u91CC\\u6765\\u7684\\u95EE\\u9898\\uFF0C\\u5728\\u4E00\\u4E9B\\u5FEB\\u901F\\u9A8C\\u8BC1\\u7684\\u573A\\u666F\\u4E0B\\u6216\\u8005\\u4F9D\\u8D56\\u4E00\\u4E9B\\u5916\\u90E8\\u8D44\\u6E90\\u7684\\u65F6\\u5019\\uFF0C\\u80FD\\u591F\\u62FF\\u6765\\u5C31\\u7528\\u3002\"), mdx(\"h3\", null, \"2. \\u4F7F\\u7528\\u8BED\\u6CD5\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n\\n\\n\\n\\n\\n\\n\\n\")), mdx(\"h3\", null, \"3. \\u4E3A\\u4EC0\\u4E48\\u65E0\\u6CD5\\u4F7F\\u7528\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u5F88\\u5BB9\\u6613\\u5C31\\u610F\\u8BC6\\u5230\\uFF0C\\u8FD9\\u79CD\\u65B9\\u4FBF\\u7684\\u7B56\\u7565\\uFF0C\\u5BF9\\u5E94\\u7684\\u662F\\u5185\\u5BB9\\u6EE5\\u7528\\u3001\\u5B89\\u5168\\u98CE\\u9669\\u3001\\u4E0D\\u53EF\\u63A7\\u7B49\\u95EE\\u9898\\u3002\\u8FD9\\u4E5F\\u662F\\u5F88\\u5BB9\\u6613\\u7406\\u89E3\\u7684\\uFF0C\\u65E0\\u8BBA\\u662F\\u5927\\u5382\\u5C0F\\u5382\\u8FD8\\u662F\\u76D1\\u7BA1\\u90E8\\u95E8\\uFF0C\\u8FD9\\u79CD\\u4E0D\\u53EF\\u63A7\\u7684\\u611F\\u89C9\\u662F\\u4E00\\u7968\\u5426\\u51B3\\u5236\\u7684\\u3002\"), mdx(\"p\", null, \"\\u6211\\u5012\\u662F\\u89C9\\u5F97\\u8FD9\\u4E9B\\u7B56\\u7565\\u5F88\\u5BF9\\u80C3\\u53E3\\uFF0C\\u60F3\\u5C0F\\u8303\\u56F4\\u7684\\u4F7F\\u7528\\u4E0B\\u5462\\uFF1F\\u76F4\\u63A5\\u90E8\\u7F72 JSDeliver \\u7684\\u6E90\\u7AD9\\uFF1F\\u5443\\u5443\\u5443...\\u786E\\u5B9E\\u6CA1\\u90A3\\u4E48\\u5927\\u5FC5\\u8981\\uFF0C\\u7B80\\u5355\\u5B9E\\u73B0\\u8D77\\u6765\\u5E94\\u8BE5\\u4E0D\\u96BE\\uFF0C\\u4E0B\\u9762\\u5C31\\u8BD5\\u4E0B\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u5B9E\\u73B0\\u65B9\\u6848\"), mdx(\"p\", null, \"\\u8BBE\\u8BA1\\u5927\\u6982\\u76EE\\u6807\\u662F\\u81EA\\u52A8\\u5C06\\u6211\\u4EECURL\\u8BF7\\u6C42\\u7684\\u8D44\\u6E90\\uFF0C\\u81EA\\u52A8\\u4E0B\\u8F7D\\u7F13\\u5B58\\uFF0C\\u7136\\u540E\\u4EA4\\u7ED9 CDN \\u8282\\u70B9\\u3002\\u6838\\u5FC3\\u90E8\\u5206\\u662F\\u6211\\u4EEC\\u81EA\\u5DF1\\u670D\\u52A1\\u5668\\u7684\\u8BED\\u6CD5\\u89E3\\u6790\\u3001\\u4EE3\\u7406\\u4E0B\\u8F7D\\u3001\\u7136\\u540E\\u7F13\\u5B58\\u5B58\\u50A8\\u3002\"), mdx(\"h3\", null, \"1. \\u7CFB\\u7EDF\\u67B6\\u6784\\u8BBE\\u8BA1\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"\\u7AEF\\u4FA7\\u8BF7\\u6C42 \\u2192 CDN\\u8FB9\\u7F18\\u8282\\u70B9 \\u2192 \\u56DE\\u6E90\\u670D\\u52A1\\u5668 \\u2192 URL\\u8BED\\u6CD5\\u89E3\\u6790 \\u2192 \\u4EE3\\u7406\\u4E0B\\u8F7D \\u2192 \\u5B58\\u50A8\\u672C\\u5730 \\u2192 \\u54CD\\u5E94\\u56DE\\u6E90\\n\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u8D44\\u6E90\\u4F7F\\u7528\\u767D\\u540D\\u5355\\u7B56\\u7565\\uFF0C\\u9632\\u6B62\\u6EE5\\u7528\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u4E0B\\u8F7D\\u90E8\\u5206\\uFF0C\\u4F7F\\u7528\\u81EA\\u5EFA\\u7684\\u4EE3\\u7406\\uFF0C\\u4FDD\\u8BC1\\u5B89\\u5168\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5B58\\u50A8\\u90E8\\u5206\\uFF0C\\u4F7F\\u7528\\u672C\\u5730\\u5B58\\u50A8\\uFF0C\\u4FDD\\u8BC1\\u53EF\\u7528\\u6027\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u4F7F\\u7528\\u8DEF\\u5F84\\u5339\\u914D\\u7B56\\u7565\\u89E3\\u6790\\u5305\\u76EE\\u6807\")), mdx(\"h3\", null, \"2. \\u6838\\u5FC3\\u529F\\u80FD\\u6A21\\u5757\"), mdx(\"h4\", null, \"a. \\u4E3B\\u670D\\u52A1\"), mdx(\"p\", null, \"\\u7528 fastify \\u505A\\u7B80\\u5355\\u7684\\u8DEF\\u7531\\u670D\\u52A1\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"const path = require('node:path')\\nconst fastify = require('fastify')\\nconst fastifyStatic = require('@fastify/static')\\n\\nconst setRouteNpm = require('./routes/npm')\\nconst setRouteGH = require('./routes/gh')\\n\\nconst server = fastify({ logger: true })\\n\\n// \\u9996\\u9875\\nserver.get('/', async (request, reply) => {\\n reply.type('application/json').code(200)\\n const list = require('./lib-list/all.json')\\n return {\\n desc: 'only support libs from this list',\\n libs: list,\\n usage: {\\n npm: 'load npm project: https://c.ubug.io/npm/[package]@[version]/[filePath]',\\n gh: 'load github project: https://cdn.jsdelivr.net/gh/[repoOwner]/[repoName]@[archiveTagName]/[filePath]',\\n tagOrVersion: '[version] & [archiveTagName] must specify, cant be lastest/master/dev/...',\\n fileMin: 'files with suffix `js css svg json html? vue`, support [.min] to minify content',\\n filesList: '[filePath] end with folder will list files in that folder',\\n },\\n warning: [\\n 'This project is only for personal use, please do not use it for commercial purposes.',\\n 'No tech support, No service commitment, No features request. Use at your own risk.',\\n 'Love from UBUG.',\\n ]\\n }\\n})\\n\\nsetRouteNpm(server)\\nsetRouteGH(server)\\n\\nserver.setNotFoundHandler({}, function (request, reply) {\\n reply.type('application/json').code(404)\\n return { not: '404', found: request.url }\\n})\\n\\nserver.listen({ port: 3003 }, function (err, address) {\\n if (err) {\\n server.log.error(err)\\n process.exit(1)\\n }\\n server.log.info(`server listening on ${address}`)\\n})\\n\")), mdx(\"h4\", null, \"a. NPM \\u90E8\\u5206\\u7684\\u89E3\\u6790\\u548C\\u5B58\\u50A8\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"const Fastify = require('fastify')\\nconst pacote = require('pacote')\\nconst fs = require('node:fs');\\nvar mime = require('mime-types')\\nconst semver = require(\\\"semver\\\")\\nconst dirList = require('@fastify/static/lib/dirList')\\nconst utils = require('../utils')\\n\\n/**\\n * @param {Fastify} server\\n */\\nmodule.exports = (server) => {\\n server.get('/npm/:package@version/*', async (request, reply) => {\\n const pkgWithVer = request.params['package@version']\\n const targetRelPath = request.params['*']\\n\\n if (!/@/.test(pkgWithVer)) {\\n reply.code(400)\\n return 'request fail, version not found';\\n }\\n\\n const pkgFilePath = pkgWithVer + '/' + targetRelPath\\n const pkgFullPath = utils.downloadsNpmPath + '/' + pkgWithVer\\n const fileFullPath = pkgFullPath + '/' + targetRelPath\\n\\n // \\u81EA\\u52A8\\u4E0B\\u8F7D\\n if (!fs.existsSync(pkgFullPath)) {\\n const pkgName = pkgWithVer.split('@')[0]\\n if (utils.isSupportNpm(pkgName)) {\\n const version = pkgWithVer.split('@')[1]\\n\\n if (!semver.valid(version)) {\\n reply.code(400)\\n return 'request fail, version not valid';\\n }\\n\\n try {\\n const { from, resolved, integrity } = await pacote.extract(pkgWithVer, pkgFullPath, {\\n registry: \\\"https://registry.npmmirror.com\\\",\\n })\\n console.log('extracted!', from, resolved, integrity)\\n } catch (error) {\\n reply.code(500)\\n console.log(error)\\n return 'package is supported, but extract failed!';\\n }\\n } else {\\n reply.code(404)\\n return 'package is not supported';\\n }\\n }\\n if (!fs.existsSync(fileFullPath)) {\\n // min \\u547D\\u4EE4\\u63A7\\u5236\\n const result = await utils.minifyCode(fileFullPath, pkgFilePath)\\n if (result == 404) {\\n reply.code(404)\\n return 'package is supported, but the file you request is not found!';\\n } else if (result == 500) {\\n reply.code(500)\\n return 'minify source fail';\\n }\\n }\\n // \\u6587\\u4EF6\\u5217\\u8868\\u529F\\u80FD\\n if (fs.lstatSync(fileFullPath).isDirectory()) {\\n dirList.send({\\n reply,\\n dir: fileFullPath,\\n options: {\\n render: utils.listRender('npm', pkgFilePath),\\n format: 'html',\\n },\\n route: pkgFilePath,\\n prefix: '',\\n dotfiles: \\\"deny\\\",\\n })\\n return reply\\n } else {\\n reply.code(200)\\n // \\u8FD4\\u56DE\\u6B63\\u786E\\u7684\\u54CD\\u5E94\\uFF0C\\u4EE5\\u4FBF\\u80FD\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u76F4\\u63A5\\u4F7F\\u7528\\n .type(mime.lookup(fileFullPath))\\n // \\u63A7\\u5236\\u7F13\\u5B58\\uFF0C\\u56E0\\u4E3A\\u662F\\u5E26\\u6709\\u7248\\u672C\\u53F7\\u7684\\u5E93\\u6587\\u4EF6\\uFF0C\\u53EF\\u4EE5\\u5F3A\\u5236\\u7F13\\u5B58\\u5F88\\u957F\\u65F6\\u95F4\\n .header('Cache-Control', 'max-age=31104000') // 360 \\u5929\\u7684\\u5F3A\\u7F13\\u5B58\\n\\n utils.setHeaders(request, reply)\\n\\n return fs.createReadStream(fileFullPath, 'utf8')\\n }\\n })\\n}\\n\\n\")), mdx(\"h4\", null, \"b. gh \\u90E8\\u5206\\u7684\\u89E3\\u6790\\u548C\\u670D\\u52A1\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-javascript\"\n }, \"const Fastify = require('fastify')\\nconst gitly = require('gitly')\\nconst fs = require('node:fs');\\nvar mime = require('mime-types')\\nconst dirList = require('@fastify/static/lib/dirList')\\nconst utils = require('../utils')\\n\\nconst ghDownload = async (repoWithTag, repoFullPath) => {\\n let tryProxys = [\\n (originUrl) => `/to/your/proxy/${originUrl}`,\\n (originUrl) => `/to/your/proxy2/${originUrl}`,\\n ]\\n let isOK = false\\n\\n for (let i = 0; i < tryProxys.length; i++) {\\n if (isOK) return;\\n const proxyFilter = tryProxys[i];\\n\\n try {\\n const [source, destination] = await gitly.default(repoWithTag.replace('@', '#'), repoFullPath, {\\n throw: true,\\n url: {\\n filter: (info) => {\\n const { path: repo, type } = info\\n const originUrl = `https://github.com${repo}/archive/${type}.tar.gz`\\n const proxyUrl = proxyFilter(originUrl)\\n console.log(proxyUrl)\\n return proxyUrl\\n }\\n },\\n })\\n isOK = true\\n } catch (error) {\\n console.log(error)\\n }\\n }\\n if (!isOK) {\\n throw Error('gitly fetch repo fail')\\n }\\n}\\n\\n/**\\n * @param {Fastify} server\\n */\\nmodule.exports = (server) => {\\n server.get('/gh/:user/:repo@tag/*', async (request, reply) => {\\n const repoWithTag = request.params['user']+'/'+request.params['repo@tag']\\n const targetRelPath = request.params['*']\\n\\n // \\u56E0\\u4E3A\\u5F3A\\u7F13\\u5B58\\uFF0C\\u6240\\u4EE5 master/dev \\u4E4B\\u7C7B\\u7684\\u5206\\u652F\\u540D\\u4E0D\\u53EF\\u4EE5\\n if (!/@/.test(repoWithTag)) {\\n reply.code(400)\\n return 'request fail. tag not found';\\n }\\n\\n const repoFilePath = repoWithTag + '/' + targetRelPath\\n const repoFullPath = utils.downloadsGHPath + '/' + repoWithTag\\n const fileFullPath = repoFullPath + '/' + targetRelPath\\n\\n // \\u81EA\\u52A8\\u4E0B\\u8F7D\\n if (!fs.existsSync(repoFullPath)) {\\n const repoName = repoWithTag.split('@')[0]\\n if (utils.isSupportGH(repoName)) {\\n const tag = repoWithTag.split('@')[1]\\n\\n // \\u5FC5\\u987B\\u6307\\u5B9A tag\\uFF0C\\u4E0D\\u80FD\\u662F\\u9ED8\\u8BA4\\u7684 master\\uFF0C\\u5FC5\\u987B\\u662F tag\\n if (tag === 'master') {\\n reply.code(400)\\n return 'request fail, tag not valid';\\n }\\n\\n try {\\n await ghDownload(repoWithTag, repoFullPath)\\n } catch (error) {\\n reply.code(500)\\n console.log(error)\\n return 'package is supported, but extract failed!';\\n }\\n } else {\\n reply.code(404)\\n return 'package is not found';\\n }\\n }\\n if (!fs.existsSync(fileFullPath)) {\\n // min \\u547D\\u4EE4\\u63A7\\u5236\\n const result = await utils.minifyCode(fileFullPath, repoFilePath)\\n if (result == 404) {\\n reply.code(404)\\n return 'package is supported, but the file you request is not found!';\\n } else if (result == 500) {\\n reply.code(500)\\n return 'minify source fail';\\n }\\n }\\n // \\u6587\\u4EF6\\u5217\\u8868\\u529F\\u80FD\\n if (fs.lstatSync(fileFullPath).isDirectory()) {\\n dirList.send({\\n reply,\\n dir: fileFullPath,\\n options: {\\n render: utils.listRender('gh', repoFilePath),\\n format: 'html',\\n },\\n route: repoFilePath,\\n prefix: '',\\n dotfiles: \\\"deny\\\",\\n })\\n return reply\\n } else {\\n reply.code(200)\\n // \\u8FD4\\u56DE\\u6B63\\u786E\\u7684\\u54CD\\u5E94\\uFF0C\\u4EE5\\u4FBF\\u80FD\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u76F4\\u63A5\\u4F7F\\u7528\\n .type(mime.lookup(fileFullPath))\\n // \\u63A7\\u5236\\u7F13\\u5B58\\uFF0C\\u56E0\\u4E3A\\u662F\\u5E26\\u6709\\u7248\\u672C\\u53F7\\u7684\\u5E93\\u6587\\u4EF6\\uFF0C\\u53EF\\u4EE5\\u5F3A\\u5236\\u7F13\\u5B58\\u5F88\\u957F\\u65F6\\u95F4\\n .header('Cache-Control', 'max-age=31104000') // 360 \\u5929\\u7684\\u5F3A\\u7F13\\u5B58\\n\\n utils.setHeaders(request, reply)\\n\\n return fs.createReadStream(fileFullPath, 'utf8')\\n }\\n })\\n}\\n\")), mdx(\"h3\", null, \"3. \\u90E8\\u7F72\\u65B9\\u6848\"), mdx(\"p\", null, \"\\u76F4\\u63A5 nginx \\u90E8\\u7F72\\u5373\\u53EF\\uFF0C\\u8FD9\\u91CC\\u5C31\\u4E0D\\u591A\\u8BF4\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u901A\\u8FC7\\u4EE5\\u4E0A\\u65B9\\u6848\\uFF0C\\u6211\\u4EEC\\u53EF\\u4EE5\\u642D\\u5EFA\\u4E00\\u4E2A\\u7A33\\u5B9A\\u53EF\\u9760\\u7684 CDN \\u670D\\u52A1\\uFF0C\\u867D\\u7136\\u529F\\u80FD\\u4E0D\\u5982 jsDeliver \\u5B8C\\u5584\\uFF0C\\u4F46\\u8DB3\\u4EE5\\u6EE1\\u8DB3\\u4E00\\u822C\\u7684\\u65E5\\u5E38\\u9700\\u6C42\\u3002\"), mdx(\"p\", null, \"\\u5177\\u4F53\\u7684\\u4F7F\\u7528\\u573A\\u666F\\u662F\\u5728\\u4E00\\u4E9B\\u5C0F\\u7684\\u9875\\u9762\\u7EA7\\u522B\\u5E94\\u7528\\u4E2D\\u4F7F\\u7528\\uFF0C\\u5FEB\\u901F\\u9A8C\\u8BC1\\u3001\\u5FEB\\u901F\\u90E8\\u7F72\\uFF0C\\u4E0D\\u9700\\u8981\\u592A\\u590D\\u6742\\u7684\\u6253\\u5305\\u4F18\\u5316\\u548C\\u90E8\\u7F72\\u6D41\\u7A0B\\u3002\"), mdx(\"h2\", null, \"\\u60F3\\u8BA9\\u8BFB\\u8005\\u4E86\\u89E3\\u7684\\u4E8B\\u60C5\"), mdx(\"p\", null, \"\\u5728\\u9605\\u8BFB\\u8FD9\\u7BC7\\u5173\\u4E8E\\u624B\\u52A8\\u642D\\u5EFA CDN \\u7684\\u6587\\u7AE0\\u524D\\uFF0C\\u5E0C\\u671B\\u4F60\\u80FD\\u7406\\u89E3\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"CDN \\u7684\\u6838\\u5FC3\\u4EF7\\u503C\"), \" - \\u5C06\\u5185\\u5BB9\\u5206\\u53D1\\u5230\\u6700\\u8FD1\\u7684\\u8282\\u70B9\\uFF0C\\u52A0\\u901F\\u8BBF\\u95EE\\u901F\\u5EA6\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u5F00\\u6E90 CDN \\u7684\\u91CD\\u8981\\u6027\"), \" - \\u89E3\\u51B3\\u516C\\u5171\\u5E93\\u8BBF\\u95EE\\u4E0D\\u7A33\\u5B9A\\u7684\\u95EE\\u9898\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u6280\\u672F\\u5B9E\\u73B0\\u7684\\u6743\\u8861\"), \" - \\u5728\\u529F\\u80FD\\u3001\\u6210\\u672C\\u548C\\u7A33\\u5B9A\\u6027\\u4E4B\\u95F4\\u627E\\u5230\\u5E73\\u8861\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u8FD0\\u7EF4\\u7684\\u590D\\u6742\\u6027\"), \" - CDN \\u4E0D\\u4EC5\\u4EC5\\u662F\\u6280\\u672F\\u95EE\\u9898\\uFF0C\\u8FD8\\u6709\\u8FD0\\u7EF4\\u548C\\u6210\\u672C\\u8003\\u91CF\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u81EA\\u5EFA vs \\u4F7F\\u7528\"), \" - \\u6839\\u636E\\u56E2\\u961F\\u89C4\\u6A21\\u548C\\u9700\\u6C42\\u9009\\u62E9\\u5408\\u9002\\u7684\\u65B9\\u6848\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"32a4be1f-afd7-5cf1-aaaf-ccb6e8b3e2aa","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/h5kit/H5KIT.md","id":"35a34818-564f-5a98-8f95-6581d65262c7","parent":{"name":"H5KIT","sourceInstanceName":"blog"},"excerpt":"想让你了解的是一个拖拽生成的低代码平台，虽然是低配的，但是实现起来还挺有意思。 一、背景和需求 H5 本来是 HTML5 的缩写，与 CSS3 和 ES5 代表着当时多年迟滞的高级浏览器特性更新，随着移动互联网的发展，逐渐的含义在运营层面变成了互动网页，更是基本上特指手机端的互动营销页面。H5 的形式在当时是一个非常热门的营销方式，毕竟快速接入，获客方便。 目前的 H5 逐步发展成熟，包括 Hybrid H5 的普遍应用，还有组件库、SPA 等等概念的兴起，说起来各大公司的实际业务更多是在做 H…","fields":{"title":"🪂 又一个 H5 拖放平台","slug":"/blog/h5kit","description":"团队准备做一个很有意思的 toC 的个性化互动页面定制，找了一些开源方案，实在是感觉二次开发起来费了力气还是缺这缺那，不自己搭不舒服。","date":"2024-06-01","redirects":null,"datetime":"2024-06-01 18:13:35","categories":["thinking"],"series":null,"tags":["writing"],"status":"online"},"frontmatter":{"published":null,"tags":["writing"],"theme":null,"slug":"h5kit","date":"2024-06-01 18:13:35"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"h5kit\",\n \"title\": \"🪂 又一个 H5 拖放平台\",\n \"date\": \"2024-06-01 18:13:35\",\n \"author\": \"Ubug\",\n \"description\": \"团队准备做一个很有意思的 toC 的个性化互动页面定制，找了一些开源方案，实在是感觉二次开发起来费了力气还是缺这缺那，不自己搭不舒服。\",\n \"categories\": [\"thinking\"],\n \"tags\": [\"writing\"],\n \"banner_icon\": \"🚏\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"p\", null, \"\\u60F3\\u8BA9\\u4F60\\u4E86\\u89E3\\u7684\\u662F\\u4E00\\u4E2A\\u62D6\\u62FD\\u751F\\u6210\\u7684\\u4F4E\\u4EE3\\u7801\\u5E73\\u53F0\\uFF0C\\u867D\\u7136\\u662F\\u4F4E\\u914D\\u7684\\uFF0C\\u4F46\\u662F\\u5B9E\\u73B0\\u8D77\\u6765\\u8FD8\\u633A\\u6709\\u610F\\u601D\\u3002\"), mdx(\"hr\", null), mdx(\"h2\", null, \"\\u4E00\\u3001\\u80CC\\u666F\\u548C\\u9700\\u6C42\"), mdx(\"p\", null, \"H5 \\u672C\\u6765\\u662F HTML5 \\u7684\\u7F29\\u5199\\uFF0C\\u4E0E CSS3 \\u548C ES5 \\u4EE3\\u8868\\u7740\\u5F53\\u65F6\\u591A\\u5E74\\u8FDF\\u6EDE\\u7684\\u9AD8\\u7EA7\\u6D4F\\u89C8\\u5668\\u7279\\u6027\\u66F4\\u65B0\\uFF0C\\u968F\\u7740\\u79FB\\u52A8\\u4E92\\u8054\\u7F51\\u7684\\u53D1\\u5C55\\uFF0C\\u9010\\u6E10\\u7684\\u542B\\u4E49\\u5728\\u8FD0\\u8425\\u5C42\\u9762\\u53D8\\u6210\\u4E86\\u4E92\\u52A8\\u7F51\\u9875\\uFF0C\\u66F4\\u662F\\u57FA\\u672C\\u4E0A\\u7279\\u6307\\u624B\\u673A\\u7AEF\\u7684\\u4E92\\u52A8\\u8425\\u9500\\u9875\\u9762\\u3002H5 \\u7684\\u5F62\\u5F0F\\u5728\\u5F53\\u65F6\\u662F\\u4E00\\u4E2A\\u975E\\u5E38\\u70ED\\u95E8\\u7684\\u8425\\u9500\\u65B9\\u5F0F\\uFF0C\\u6BD5\\u7ADF\\u5FEB\\u901F\\u63A5\\u5165\\uFF0C\\u83B7\\u5BA2\\u65B9\\u4FBF\\u3002\"), mdx(\"p\", null, \"\\u76EE\\u524D\\u7684 H5 \\u9010\\u6B65\\u53D1\\u5C55\\u6210\\u719F\\uFF0C\\u5305\\u62EC Hybrid H5 \\u7684\\u666E\\u904D\\u5E94\\u7528\\uFF0C\\u8FD8\\u6709\\u7EC4\\u4EF6\\u5E93\\u3001SPA \\u7B49\\u7B49\\u6982\\u5FF5\\u7684\\u5174\\u8D77\\uFF0C\\u8BF4\\u8D77\\u6765\\u5404\\u5927\\u516C\\u53F8\\u7684\\u5B9E\\u9645\\u4E1A\\u52A1\\u66F4\\u591A\\u662F\\u5728\\u505A H5\\uFF0C\\u5728\\u8FFD\\u6C42\\u6025\\u901F\\u654F\\u6377\\u7684\\u5F00\\u53D1\\u9636\\u6BB5\\uFF0C\\u642D\\u5EFA\\u5F0F\\u7684 H5 \\u5E73\\u53F0\\u4E5F\\u5F02\\u5E38\\u4E30\\u5BCC\\u3002\"), mdx(\"p\", null, \"\\u5E7F\\u4E49\\u4E0A\\u7684 h5 \\u7F16\\u8F91\\u5E73\\u53F0\\u53EF\\u4EE5\\u7406\\u89E3\\u6210\\u652F\\u6301\\u56FE\\u6587\\u5F62\\u5F0F\\u3001\\u6240\\u89C1\\u6240\\u5F97\\u7684\\u62D6\\u62FD\\u751F\\u6210\\uFF0C\\u914D\\u5408\\u6570\\u636E\\u5C42\\u3001\\u7EC4\\u4EF6\\u5E93\\u3001\\u7D20\\u6750\\u5E93\\u7B49\\uFF0C\\u6700\\u540E\\u751F\\u6210 h5 \\u7F51\\u9875\\u7684\\u5F62\\u5F0F\\u3002\"), mdx(\"p\", null, \"\\u4ECE\\u529F\\u80FD\\u4E0A\\u6765\\u770B\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u56FE\\u6587\\u7F16\\u8F91\\u5668\\uFF1A\\u9002\\u914D\\u4E8E\\u5404\\u5927\\u516C\\u4F17\\u53F7\\u548C\\u5185\\u5BB9\\u5E73\\u53F0\\uFF0C\\u4E3B\\u8981\\u662F\\u6D41\\u5F0F\\u5E03\\u5C40\\uFF0C\\u91CD\\u70B9\\u5728\\u56FE\\u6587\\u6392\\u7248\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"H5 \\u7F16\\u8F91\\u5668\\uFF1A\\u4F5C\\u4E3A\\u4E92\\u52A8\\u5355\\u9875\\u6216\\u7FFB\\u9875\\uFF0C\\u4E3B\\u8981\\u662F\\u7EDD\\u5BF9\\u5E03\\u5C40\\uFF0C\\u91CD\\u70B9\\u5728\\u8BBE\\u8BA1\\u3001\\u4E92\\u52A8\\u548C\\u52A8\\u753B\\u3002\")), mdx(\"p\", null, \"\\u4ECE\\u65B9\\u5411\\u6765\\u770B\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u8BBE\\u8BA1\\u5411: \\u76EE\\u6807\\u662F\\u4EA7\\u54C1\\u539F\\u578B\\uFF0C\\u91CD\\u70B9\\u5728\\u5E03\\u5C40\\uFF0C\\u81EA\\u9002\\u5E94\\uFF0C\\u5927\\u90E8\\u5206\\u5143\\u7D20\\u662F\\u77E2\\u91CF\\u548C\\u56FE\\u5F62\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u539F\\u578B\\u5411\\uFF1A\\u91CD\\u70B9\\u5728\\u751F\\u6210\\u914D\\u7F6E\\uFF0C\\u6839\\u636E\\u914D\\u7F6E\\u989D\\u5916\\u518D\\u505A\\u751F\\u6210\\uFF0C\\u4E0D\\u8FFD\\u6C42\\u6240\\u89C1\\u6240\\u5F97\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4E1A\\u52A1\\u5411\\uFF1A\\u505A\\u4E00\\u4E2A\\u4E1A\\u52A1\\u5C42\\u7684\\u5FEB\\u642D\\u5E73\\u53F0\\uFF0C\\u5FEB\\u901F\\u642D\\u8425\\u9500\\u843D\\u5730\\u9875\\u3001\\u6D3B\\u52A8\\u9875\\u3001\\u62BD\\u5956\\u9875\\u3001\\u843D\\u5730\\u9875\\u7B49\\u7B49\\u3002\\u65E2\\u6709\\u9762\\u5411\\u5185\\u90E8\\u8FD0\\u8425\\u7684\\u4E1A\\u52A1\\uFF0C\\u9762\\u5411 c \\u7AEF\\u7684\\u9080\\u8BF7\\u51FD\\uFF0C\\u9762\\u5411\\u5F00\\u53D1\\u7684\\u4F4E\\u4EE3\\u7801\\u3002\")), mdx(\"p\", null, \"\\u6211\\u4EEC\\u7684\\u4EA7\\u54C1\\u5C5E\\u6027\\u5C5E\\u4E8E\\u9762\\u5411 c \\u7AEF\\u7684\\u4E00\\u4E2A\\u5FEB\\u642D\\u4E1A\\u52A1\\uFF0C\\u8FFD\\u6C42\\u8BBE\\u8BA1\\u3001\\u4E92\\u52A8\\u548C\\u52A8\\u753B\\uFF0C\\u8BBE\\u8BA1\\u5E08\\u505A\\u597D\\u6A21\\u677F\\uFF0C\\u7528\\u6237\\u81EA\\u5DF1\\u989D\\u5916\\u518D\\u5FAE\\u8C03\\u5B9A\\u5236\\u3002\"), mdx(\"p\", null, \"\\u5728\\u9879\\u76EE\\u521D\\u671F\\uFF0C\\u6211\\u4EEC\\u8C03\\u7814\\u4E86\\u5E02\\u9762\\u4E0A\\u4E3B\\u6D41\\u7684 H5 \\u5E73\\u53F0\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u6613\\u4F01\\u79C0\"), \"\\uFF1A\\u6210\\u719F\\u7684\\u6A21\\u677F\\u5E02\\u573A\\uFF0C\\u4F46\\u5B9A\\u5236\\u80FD\\u529B\\u6709\\u9650\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u5A5A\\u793C\\u7EAA\"), \"\\uFF1A\\u6A21\\u677F\\u5F3A\\u5927\\u751F\\u6001\\u591A\\u6837\")), mdx(\"p\", null, \"\\u8FD9\\u4E9B\\u5E73\\u53F0\\u5404\\u6709\\u4F18\\u52BF\\uFF0C\\u4F46\\u90FD\\u53EF\\u60DC\\u6CA1\\u6CD5\\u76F4\\u63A5\\u7528\\uFF0C\\u6211\\u4EEC\\u4E1A\\u52A1\\u4E0A\\u9700\\u6C42\\u4E5F\\u5E76\\u4E0D\\u662F\\u5F88\\u590D\\u6742\\uFF0C\\u80FD\\u7528\\u5C31\\u884C\\u6162\\u6162\\u8FED\\u4EE3\\uFF0C\\u521D\\u671F\\u6307\\u5B9A\\u7684\\u76EE\\u6807\\u5C31\\u662F\\u591A\\u9875\\u52A8\\u753B\\u3001\\u56FE\\u7247\\u6587\\u5B57\\u53EF DIY\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u5E95\\u5C42\\u8BBE\\u8BA1\"), mdx(\"p\", null, \"\\u8BF4\\u8D77\\u62D6\\u62FD\\u7EC4\\u4EF6\\uFF0C\\u90A3\\u4E48\\u6700\\u6838\\u5FC3\\u7684\\u662F\\u4EC0\\u4E48\\u5462\\uFF1F\\u5BF9\\u54AF\\uFF0C\\u5C31\\u662F\\u5E95\\u5C42\\u8BBE\\u8BA1\\uFF0C\\u5C31\\u662F\\u6570\\u636E\\u7ED3\\u6784\\u3001\\u5E03\\u5C40\\u89C4\\u5219\\u3001\\u4EA4\\u4E92\\u65B9\\u6CD5\\u3002\"), mdx(\"p\", null, \"\\u652F\\u6301\\u54EA\\u4E9B\\u7279\\u6027\\u548C\\u529F\\u80FD\\u76F4\\u63A5\\u80FD\\u591F\\u53CD\\u6620\\u5728\\u6700\\u540E\\u7684\\u6570\\u636E\\u7ED3\\u6784\\u4E0A\\uFF0C\\u53EA\\u6709\\u786E\\u5B9A\\u4E86\\u5E03\\u5C40\\u89C4\\u5219\\u624D\\u80FD\\u786E\\u5B9A\\u6240\\u89C1\\u5373\\u6240\\u5F97\\u7684\\u6CD5\\u5B50\\uFF0C\\u53EA\\u6709\\u7F15\\u6E05\\u4E86\\u4EA4\\u4E92\\u624D\\u80FD\\u7740\\u624B\\u53BB\\u505A\\u3002\"), mdx(\"p\", null, \"\\u6211\\u4EEC\\u505A\\u4E86 4 \\u4E2A\\u6A21\\u5F0F\\u6765\\u652F\\u6301\\u8FD9\\u4E2A\\u9700\\u6C42\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"factory\"), \" \\u2014 PC \\u7AEF\\u7F16\\u8F91\\u5668\\uFF0C\\u8BBE\\u8BA1\\u5E08\\u5168\\u529F\\u80FD\\u8BBE\\u8BA1\\u5DE5\\u4F5C\\u53F0\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"diy\"), \" \\u2014 \\u624B\\u673A\\u7AEF\\u7F16\\u8F91\\uFF0C\\u7528\\u6237\\u7B80\\u5355\\u7684\\u6587\\u5B57\\u56FE\\u7247\\u66FF\\u6362\\u548C\\u9884\\u89C8\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"runner\"), \" \\u2014 \\u7EAF\\u9884\\u89C8\\u64AD\\u653E\\u5668\\uFF0CSwiper \\u9A71\\u52A8\\u7684\\u591A\\u9875\\u7FFB\\u9875\\u5C55\\u793A\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"transfer\"), \" \\u2014 \\u7B2C\\u4E09\\u65B9\\u683C\\u5F0F\\u8F6C\\u6362\\u5668\")), mdx(\"h3\", null, \"1. \\u9700\\u6C42\\u3001\\u7279\\u6027\\u3001\\u529F\\u80FD\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5355\\u9875\\u3001\\u591A\\u9875\\u548C\\u957F\\u9875\\u90FD\\u652F\\u6301\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u56FE\\u7247\\u3001\\u6587\\u5B57\\u3001\\u77E2\\u91CF\\u56FE\\u7B49\\u7D20\\u6750\\uFF0C\\u9884\\u8BBE\\u7684\\u8868\\u5355\\u7B49\\u7EC4\\u4EF6\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u52A8\\u753B\\uFF1A\\u8FDB\\u5165\\u3001\\u5F3A\\u8C03\\u3001\\u9000\\u51FA\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u753B\\u5E03\\u7F29\\u653E\\u3001\\u62D6\\u52A8\\u3001\\u65CB\\u8F6C\\u3001\\u5206\\u7EC4\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u56FE\\u5C42\\u6DF7\\u5408\\u3001\\u9875\\u9762\\u6EE4\\u955C\")), mdx(\"h3\", null, \"2. \\u6570\\u636E\\u7ED3\\u6784\"), mdx(\"p\", null, \"\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"TypeScript\"), \" \\u81EA\\u7136\\u4E5F\\u8981\\u63D0\\u524D\\u5199\\u4E2A\\u7C7B\\u578B\\uFF0C\\u65B9\\u4FBF\\u540E\\u7EED\\u4F7F\\u7528\\uFF0C\\u6839\\u636E\\u7ECF\\u9A8C\\u52A0\\u4E00\\u70B9\\u70B9\\u8BA8\\u8BBA\\uFF0C\\u786E\\u5B9A\\u51FA\\u57FA\\u672C\\u7ED3\\u6784\\u3002\"), mdx(\"p\", null, \"\\u6574\\u4E2A\\u9875\\u9762\\u6570\\u636E\\u7528 Immutable.js \\u7684 Record \\u6765\\u7BA1\\u7406\\uFF0C\\u8FD9\\u6837\\u7ED3\\u6784\\u6027\\u5171\\u4EAB\\u548C\\u6BD4\\u8F83\\u90FD\\u5F88\\u65B9\\u4FBF\\uFF0C\\u6539\\u4E00\\u4E2A\\u5143\\u7D20\\u4E0D\\u4F1A\\u7275\\u8FDE\\u5230\\u6574\\u68F5\\u6811\\u3002\"), mdx(\"p\", null, \"\\u6700\\u9876\\u5C42\\u662F Page\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"Page {\\n title: string // \\u9875\\u9762\\u6807\\u9898\\n desc: string // \\u63CF\\u8FF0\\n width: number // \\u753B\\u5E03\\u5BBD\\u5EA6\\uFF0C\\u9ED8\\u8BA4 375\\uFF08iPhone \\u5BBD\\u5EA6\\uFF09\\n height: number // \\u753B\\u5E03\\u9AD8\\u5EA6\\uFF0C\\u9ED8\\u8BA4 667\\n views: List // \\u6709\\u5E8F\\u5217\\u8868\\uFF0C\\u6BCF\\u4E2A View \\u5C31\\u662F\\u4E00\\u9875\\n defaultViewState: ViewState // \\u9ED8\\u8BA4\\u7684\\u9875\\u9762\\u89C6\\u89C9\\u72B6\\u6001\\n viewEffect: string // \\u7FFB\\u9875\\u6548\\u679C\\uFF1Aswiper|scroll|fade|cube|flip|creative-1~6\\n music: string // \\u80CC\\u666F\\u97F3\\u4E50\\u5730\\u5740\\n musicLoop: boolean // \\u9ED8\\u8BA4 true\\n blobs: { [key]: string } // \\u5185\\u5D4C\\u8D44\\u6E90\\uFF0Cbase64 \\u6216 SVG \\u5B57\\u7B26\\u4E32\\n}\\n\")), mdx(\"p\", null, \"View \\u5C31\\u662F\\u4E00\\u5F20\\u5E7B\\u706F\\u7247\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"View {\\n id: string\\n elements: List // \\u9875\\u9762\\u4E0A\\u7684\\u5143\\u7D20\\u5217\\u8868\\n state: ViewState // \\u80CC\\u666F\\u8272\\u3001\\u6EE4\\u955C\\u7B49\\n}\\n\")), mdx(\"p\", null, \"\\u5143\\u7D20\\u662F\\u6838\\u5FC3\\uFF0C\\u6240\\u6709\\u5143\\u7D20\\u5171\\u4EAB\\u4E00\\u7EC4\\u57FA\\u7840\\u5C5E\\u6027\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"ElemBaseProps {\\n name, id, x, y, width, height\\n rotation // \\u65CB\\u8F6C\\u89D2\\u5EA6\\n blend // CSS mix-blend-mode\\n opacity // 0-100\\n filter // \\u6EE4\\u955C\\u9884\\u8BBE\\u540D\\n animations // \\u52A8\\u753B\\u5217\\u8868\\n backgroundColor\\n borderRadius // \\u56DB\\u4E2A\\u89D2\\u72EC\\u7ACB\\u63A7\\u5236\\n keepRatio // \\u9501\\u5B9A\\u5BBD\\u9AD8\\u6BD4\\n locked, visible\\n diy // \\u662F\\u5426\\u5141\\u8BB8\\u7528\\u6237 DIY \\u7F16\\u8F91\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u6709\\u4E2A\\u6BD4\\u8F83\\u5173\\u952E\\u7684\\u8BBE\\u8BA1\\u51B3\\u7B56\\uFF1A\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u5143\\u7D20\\u7684 x\\u3001y \\u5750\\u6807\\u662F\\u4E2D\\u5FC3\\u70B9\\uFF0C\\u4E0D\\u662F\\u5DE6\\u4E0A\\u89D2\"), \"\\u3002\\u8FD9\\u4E48\\u505A\\u7684\\u597D\\u5904\\u662F\\u65CB\\u8F6C\\u65F6\\u5929\\u7136\\u7ED5\\u89C6\\u89C9\\n\\u4E2D\\u5FC3\\u8F6C\\uFF0C\\u4E0D\\u9700\\u8981\\u989D\\u5916\\u7B97\\u504F\\u79FB\\uFF1B\\u5BF9\\u9F50\\u4E24\\u4E2A\\u5143\\u7D20\\u4E5F\\u662F\\u5BF9\\u9F50\\u4E2D\\u5FC3\\u70B9\\uFF0C\\u76F4\\u89C9\\u4E0A\\u66F4\\u81EA\\u7136\\u3002\"), mdx(\"p\", null, \"\\u5177\\u4F53\\u6709 4 \\u79CD\\u5143\\u7D20\\u7C7B\\u578B\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"ElemImg\"), \"\\uFF08\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"type: \\\"image\\\"\"), \"\\uFF09\\uFF1A\\u52A0 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"src\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"fit\"), \"\\uFF08cover/contain/none\\uFF09\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"fitPos\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"ElemText\"), \"\\uFF08\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"type: \\\"text\\\"\"), \"\\uFF09\\uFF1A\\u52A0\\n\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"content\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"fontSize\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"fontFamily\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"color\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"lineHeight\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"textAlign\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"letterSpacing\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"textEffect\"), \"\\n\\u7B49\\u4E00\\u6574\\u5957\\u6587\\u5B57\\u5C5E\\u6027\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"ElemShape\"), \"\\uFF08\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"type: \\\"shape\\\"\"), \"\\uFF09\\uFF1A\\u52A0 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"fill\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"stroke\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"strokeWidth\"), \"\\uFF0C\\u4EE5\\u53CA\\u4E00\\u4E2A SVG \\u6A21\\u677F\\u5B57\\u7B26\\u4E32\\uFF08\\u652F\\n\\u6301 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"{{expression}}\"), \" \\u6A21\\u677F\\u8BED\\u6CD5\\uFF09\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"ElemGroup\"), \"\\uFF08\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"type: \\\"group\\\"\"), \"\\uFF09\\uFF1A\\u52A0 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"elems: List\"), \"\\uFF0C\\u9012\\u5F52\\u7ED3\\u6784\\uFF0C\\u7EC4\\u91CC\\u53EF\\u4EE5\\u5D4C\\u5957\\u7EC4\")), mdx(\"h3\", null, \"3. \\u5E03\\u5C40\\u89C4\\u5219\"), mdx(\"p\", null, \"\\u5143\\u7D20\\u5168\\u90E8\\u7528\\u7EDD\\u5BF9\\u5B9A\\u4F4D\\uFF0C\\u753B\\u5E03\\u672C\\u8EAB\\u662F\\u4E00\\u4E2A 8000\\xD78000 \\u7684\\u865A\\u62DF\\u7A7A\\u95F4\\uFF0C\\u901A\\u8FC7 CSS transform \\u7684 scale \\u548C translate \\u6765\\n\\u5B9E\\u73B0\\u7F29\\u653E\\u548C\\u5E73\\u79FB\\u3002\"), mdx(\"p\", null, \"\\u5B9A\\u4F4D\\u7684\\u6838\\u5FC3\\u903B\\u8F91\\u901A\\u8FC7 CSS \\u53D8\\u91CF\\u5B9E\\u73B0\\uFF0C\\u56E0\\u4E3A x/y \\u662F\\u4E2D\\u5FC3\\u70B9\\uFF0C\\u6240\\u4EE5\\u9700\\u8981\\u7B97\\u4E00\\u6B21\\u504F\\u79FB\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \"--ele-x: calc({x}px - (var(--ele-w) / 2))\\n--ele-y: calc({y}px - (var(--ele-h) / 2))\\n--ele-w: {width}px\\n--ele-h: {height}px\\n\\ntransform: translate(var(--ele-x), var(--ele-y))\\n\")), mdx(\"p\", null, \"\\u7EC4\\u5185\\u7684\\u5143\\u7D20\\u5750\\u6807\\u5219\\u662F\\u767E\\u5206\\u5236\\u7684\\uFF0C\\u76F8\\u5BF9\\u4E8E\\u7EC4\\u7684\\u5C3A\\u5BF8\\u6765\\u7B97\\u3002\\u8FD9\\u6837\\u7EC4 resize \\u7684\\u65F6\\u5019\\u5B50\\u5143\\u7D20\\u4F1A\\u7B49\\u6BD4\\u7F29\\u653E\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-css\"\n }, \"--ele-w: calc({width}% / 100 * var(--ele-group-w))\\n--ele-x: calc({x}% * var(--ele-group-w) - var(--ele-w) / 2)\\n\")), mdx(\"p\", null, \"\\u4E0D\\u540C\\u6A21\\u5F0F\\u7684\\u7F29\\u653E\\u7B56\\u7565\\u4E0D\\u4E00\\u6837\\uFF1A\\u7F16\\u8F91\\u5668\\u91CC\\u7528\\u6237\\u81EA\\u5DF1\\u6EDA\\u8F6E\\u7F29\\u653E\\u3001diy \\u548C\\u64AD\\u653E\\u6A21\\u5F0F\\u4E0B\\u6839\\u636E\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"window.innerWidth / page.width\"), \" \\u81EA\\u9002\\u5E94\\u3002\"), mdx(\"h3\", null, \"4. \\u4EA4\\u4E92\\u65B9\\u6CD5\"), mdx(\"p\", null, \"\\u753B\\u5E03\\u4EA4\\u4E92\\u7531 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"MoveBox\"), \" \\u7C7B\\u7EDF\\u4E00\\u7BA1\\u7406\\uFF0C\\u5B83\\u7EE7\\u627F\\u81EA EventEmitter\\uFF0C\\u5904\\u7406\\u6240\\u6709\\u9F20\\u6807\\u4E8B\\u4EF6\\u3002\\u4EA4\\u4E92\\u6A21\\u5F0F\\u5305\\u62EC\\uFF1A\\u9009\\u62E9\\u3001\\u62D6\\u52A8\\u753B\\u5E03\\u3001\\u7F29\\u653E\\u3001\\u653E\\u7F6E\\u6587\\u5B57\\u3001\\u653E\\u7F6E\\u56FE\\u5F62\\u3002\"), mdx(\"p\", null, \"\\u62D6\\u62FD\\u8FC7\\u7A0B\\u4E2D\\u6709\\u4E00\\u4E2A\\u6027\\u80FD\\u4F18\\u5316\\uFF1A\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u4E0D\\u66F4\\u65B0 React \\u72B6\\u6001\\uFF0C\\u800C\\u662F\\u76F4\\u63A5\\u6539 DOM \\u4E0A\\u7684 CSS \\u53D8\\u91CF\"), \"\\u3002\\u53EA\\u6709\\u9F20\\u6807\\u677E\\u5F00\\u65F6\\u624D\\u628A\\u6700\\u7EC8\\u503C\\u63D0\\u4EA4\\u5230 Immutable \\u6570\\u636E\\u6A21\\u578B\\u91CC\\u3002\\u8FD9\\u6837\\u62D6\\u62FD\\u5168\\u7A0B\\u4E0D\\u4F1A\\u6709 React re-render\\uFF0C\\u4FDD\\u6301 60fps\\u3002\"), mdx(\"p\", null, \"\\u53E6\\u5916\\u5B9E\\u73B0\\u4E86\\u4E09\\u5957\\u5438\\u9644\\u7CFB\\u7EDF\\uFF0C\\u53EF\\u4EE5\\u72EC\\u7ACB\\u5F00\\u5173\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u5143\\u7D20\\u5438\\u9644\"), \"\\uFF1A\\u548C\\u5176\\u4ED6\\u5143\\u7D20\\u7684\\u8FB9\\u7F18/\\u4E2D\\u5FC3\\u5BF9\\u9F50\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u753B\\u5E03\\u5438\\u9644\"), \"\\uFF1A\\u5BF9\\u9F50\\u5230\\u9875\\u9762\\u8FB9\\u754C\\u548C\\u4E2D\\u5FC3\\u7EBF\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u50CF\\u7D20\\u5438\\u9644\"), \"\\uFF1A\\u5750\\u6807\\u53D6\\u6574\")), mdx(\"p\", null, \"\\u5438\\u9644\\u68C0\\u6D4B\\u7528\\u7684\\u8DDD\\u79BB\\u9608\\u503C\\u9ED8\\u8BA4 5px\\uFF0C\\u65CB\\u8F6C\\u65F6\\u5438\\u9644\\u5230 45\\xB0 \\u7684\\u6574\\u6570\\u500D\\u3002\\u8FD8\\u6709\\u6846\\u9009\\u529F\\u80FD\\uFF0C\\u901A\\u8FC7 SAT\\uFF08\\u5206\\u79BB\\u8F74\\u5B9A\\u7406\\uFF09\\u78B0\\u649E\\u68C0\\u6D4B\\u6765\\u652F\\u6301\\u65CB\\u8F6C\\u5143\\u7D20\\u7684\\u6B63\\u786E\\u6846\\u9009\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001\\u7EC4\\u4EF6\\u7CFB\\u7EDF\\u8BBE\\u8BA1\"), mdx(\"h3\", null, \"1. \\u6E32\\u67D3\\u7ED3\\u6784\"), mdx(\"p\", null, \"\\u6CA1\\u6709\\u641E\\u4EC0\\u4E48\\u7EC4\\u4EF6\\u6CE8\\u518C\\u8868\\uFF0C\\u5C31\\u662F\\u6734\\u7D20\\u7684\\u7C7B\\u578B\\u5224\\u65AD\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-tsx\"\n }, \"{elem.type === 'image' && }\\n{elem.type === 'text' && }\\n{elem.type === 'shape' && }\\n{elem.type === 'group' && }\\n\")), mdx(\"p\", null, \"\\u6BCF\\u4E2A\\u5143\\u7D20\\u6E32\\u67D3\\u6210\\u4E09\\u5C42\\u5D4C\\u5957\\u7684 DOM \\u7ED3\\u6784\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n \\n
\\n \\n
\\n \\n
\\n
\\n
\\n
\\n\")), mdx(\"p\", null, \"\\u628A\\u52A8\\u753B\\u3001\\u65CB\\u8F6C\\u3001\\u5185\\u5BB9\\u5206\\u5230\\u4E0D\\u540C\\u7684\\u5C42\\u4E0A\\uFF0C\\u5404\\u81EA\\u72EC\\u7ACB\\u63A7\\u5236\\u4E92\\u4E0D\\u5E72\\u6270\\u3002\\u52A8\\u753B\\u5305\\u88F9\\u5728\\u6700\\u5916\\u9762\\uFF0C\\u6240\\u4EE5\\u52A8\\u753B\\u751F\\u6548\\u65F6\\u8FDE\\u65CB\\u8F6C\\u90FD\\u5E26\\u4E0A\\uFF1B\\u65CB\\u8F6C\\u53EA\\u7BA1\\u81EA\\u5DF1\\u7684 transform\\uFF1B\\u5185\\u5BB9\\u5C42\\u53EA\\u7BA1\\u6E32\\u67D3\\u3002\"), mdx(\"h3\", null, \"2. \\u56FE\\u7247\\u6E32\\u67D3\"), mdx(\"p\", null, \"\\u56FE\\u7247\\u7528\\u7684\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"background-image\"), \" \\u800C\\u4E0D\\u662F \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" \\u6807\\u7B7E\\uFF0C\\u8FD9\\u6837 cover/contain \\u7684\\u9002\\u914D\\u76F4\\u63A5\\u7528 CSS \\u641E\\u5B9A\\u3002\\u56FE\\u7247\\u6765\\u6E90\\u8D70\\u4E86\\u4E09\\u7EA7\\u67E5\\u627E\\uFF1A\\u5148\\u67E5 blobs \\u5B57\\u5178\\uFF08\\u5185\\u5D4C\\u8D44\\u6E90\\uFF09\\uFF0C\\u518D\\u8BD5 HTTP URL \\u6216 data URI\\uFF0C\\u6700\\u540E\\u67E5localForage\\uFF08IndexedDB \\u91CC\\u5B58\\u7684 Blob\\uFF09\\uFF0C\\u5C3D\\u53EF\\u80FD\\u7684\\u907F\\u514D\\u8D44\\u6E90\\u91CD\\u590D\\u5D4C\\u5165\\u95EE\\u9898\\u3002\"), mdx(\"h3\", null, \"3. \\u77E2\\u91CF\\u56FE\\u5F62\"), mdx(\"p\", null, \"Shape \\u7528\\u7684\\u662F SVG \\u6A21\\u677F\\u5F15\\u64CE\\u3002\\u6A21\\u677F\\u91CC\\u53EF\\u4EE5\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"{{expression}}\"), \" \\u5199 JavaScript \\u8868\\u8FBE\\u5F0F\\uFF0C\\u8FD0\\u884C\\u65F6\\u6C99\\u76D2\\u6C42\\u503C\\uFF0C\\u4E0A\\u4E0B\\u6587\\u91CC\\u6CE8\\u5165\\u4E86 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"__WIDTH__\"), \" \\u548C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"__HEIGHT__\"), \" \\u4E24\\u4E2A\\u53D8\\u91CF\\u3002\"), mdx(\"p\", null, \"\\u6BD4\\u5982\\u753B\\u4E00\\u4E2A\\u81EA\\u9002\\u5E94\\u7684\\u5706\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-svg\"\n }, \"\\n\")), mdx(\"p\", null, \"\\u5904\\u7406\\u987A\\u5E8F\\u662F\\u5148 HTML \\u89E3\\u7801\\uFF0C\\u518D\\u6C42\\u503C\\u6A21\\u677F\\u8868\\u8FBE\\u5F0F\\uFF0C\\u6700\\u540E\\u628A\\u5269\\u4F59\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"__WIDTH__\"), \"/\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"__HEIGHT__\"), \" \\u5B57\\u9762\\u91CF\\u66FF\\u6362\\u6210\\u5B9E\\u9645\\u5C3A\\u5BF8\\u3002\\u586B\\u5145\\u8272\\u548C\\u63CF\\u8FB9\\u8272\\u901A\\u8FC7\\u52A8\\u6001\\u6CE8\\u5165 CSS \\u89C4\\u5219\\u6765\\u5E94\\u7528\\uFF0C\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"!important\"), \" \\u8986\\u76D6 SVG \\u5185\\u8054\\u6837\\u5F0F\\u3002\"), mdx(\"h3\", null, \"4. \\u5C5E\\u6027\\u9762\\u677F\"), mdx(\"p\", null, \"\\u53F3\\u4FA7\\u5C5E\\u6027\\u9762\\u677F\\u57FA\\u4E8E TweakPane \\u505A\\u4E86\\u4E8C\\u6B21\\u5F00\\u53D1\\uFF08fork \\u4E86\\u4E00\\u4EFD\\u653E\\u5728\\u9879\\u76EE\\u91CC\\uFF09\\uFF0C\\u52A0\\u4E86\\u51E0\\u4E2A\\u81EA\\u5B9A\\u4E49\\u63D2\\u4EF6\\uFF1A\\u56FE\\u7247\\u9884\\u89C8\\u4E0A\\u4F20\\u3001SVG \\u9884\\u89C8\\u3001\\u591A\\u884C\\u6587\\u672C\\u3001\\u8D1D\\u585E\\u5C14\\u66F2\\u7EBF\\u9009\\u62E9\\u5668\\u7B49\\u3002\\u8FD9\\u6837\\u7684\\u597D\\u5904\\u662F\\u4E0D\\u7528\\u5904\\u7406\\u592A\\u590D\\u6742\\u7684\\u8868\\u5355\\u903B\\u8F91\\uFF0C\\u53EA\\u9700\\u8981\\u4E00\\u4E2A\\u7F16\\u8F91\\u9762\\u677F\\u7684\\u63A7\\u5236\\uFF0C\\u5176\\u4ED6\\u5168\\u90FD\\u5C01\\u5230 TweakPane \\u4E2D\\uFF0C\\u6BD5\\u7ADF\\u4E5F\\u4E0D\\u6D89\\u53CA\\u592A\\u591A\\u7684\\u53D6\\u503C\\u548C\\u52A8\\u6001\\u8868\\u5355\\u3002\\u4E5F\\u5C31\\u4E0D\\u9700\\u8981\\u5F15\\u5165\\u989D\\u5916\\u7684 formify \\u4E4B\\u7C7B\\u7684\\u5E93\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u9009\\u4E2D\\u5355\\u4E2A\\u5143\\u7D20\\u65F6\\u5C55\\u793A\\u5B8C\\u6574\\u5C5E\\u6027\\uFF1A\\u4F4D\\u7F6E\\u3001\\u5C3A\\u5BF8\\u3001\\u65CB\\u8F6C\\u3001\\u5706\\u89D2\\u3001\\u900F\\u660E\\u5EA6\\u3001\\u6DF7\\u5408\\u6A21\\u5F0F\\u3001\\u6EE4\\u955C\\u3001\\u80CC\\u666F\\u8272\\u7B49\\u3002\\u9009\\u4E2D\\u591A\\u4E2A\\u5143\\u7D20\\u65F6\\u5C55\\u793A\\u6279\\u91CF\\u64CD\\u4F5C\\uFF1A\\u5206\\u7EC4/\\u53D6\\u6D88\\u5206\\u7EC4\\u3001\\u516D\\u5BAB\\u683C\\u5BF9\\u9F50\\u3001\\u56DB\\u5BAB\\u683C\\u5206\\u5E03\\u3002\\u6587\\u5B57\\u3001\\u56FE\\u7247\\u3001\\u56FE\\u5F62\\u5404\\u81EA\\u8FD8\\u6709\\u72EC\\u7ACB\\u7684\\u7C7B\\u578B\\u9762\\u677F\\u3002\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u52A8\\u753B\\u7CFB\\u7EDF\"), mdx(\"h3\", null, \"1. \\u52A8\\u753B\\u5206\\u7C7B\"), mdx(\"p\", null, \"\\u5728 animate.css \\u7684\\u57FA\\u7840\\u4E0A\\u505A\\u7684\\u52A8\\u6548\\uFF0C\\u603B\\u5171\\u5927\\u6982 90 \\u591A\\u4E2A\\uFF0C\\u5206\\u4E09\\u7C7B\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u8FDB\\u5165\\u52A8\\u753B\"), \"\\uFF0846 \\u4E2A\\uFF09\\uFF1AfadeIn \\u7CFB\\u5217\\u3001slideIn \\u7CFB\\u5217\\u3001bounceIn \\u7CFB\\u5217\\u3001zoomIn \\u7CFB\\u5217\\u3001rotateIn \\u7CFB\\u5217\\uFF0C\\u8FD8\\u6709\\n\\u81EA\\u5B9A\\u4E49\\u7684 curve \\u66F2\\u7EBF\\u52A8\\u753B\\u548C\\u767E\\u5206\\u6BD4\\u8DDD\\u79BB\\u52A8\\u753B\\uFF08\\u6BD4\\u5982 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"fadeInDown30per\"), \" \\u53EA\\u79FB\\u52A8 30% \\u7684\\u8DDD\\u79BB\\uFF09\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u9000\\u51FA\\u52A8\\u753B\"), \"\\uFF0828 \\u4E2A\\uFF09\\uFF1AfadeOut\\u3001slideOut\\u3001bounceOut \\u7B49\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u5F3A\\u8C03\\u52A8\\u753B\"), \"\\uFF0816 \\u4E2A\\uFF09\\uFF1Abounce\\u3001pulse\\u3001shake\\u3001swing\\u3001tada\\u3001jello\\u3001heartBeat \\u7B49\")), mdx(\"p\", null, \"\\u6BCF\\u4E2A\\u52A8\\u753B\\u6761\\u76EE\\u6709\\u81EA\\u5DF1\\u7684\\u914D\\u7F6E\\uFF1A\\u5EF6\\u8FDF\\u3001\\u65F6\\u957F\\u3001\\u7F13\\u52A8\\u66F2\\u7EBF\\u3001\\u91CD\\u590D\\u6B21\\u6570\\uFF081-5 \\u6216\\u65E0\\u9650\\u5FAA\\u73AF\\uFF09\\u3002\"), mdx(\"h3\", null, \"2. \\u6267\\u884C\\u6D41\\u7A0B\"), mdx(\"p\", null, \"\\u64AD\\u653E\\u65F6\\u6309 View \\u904D\\u5386\\u6BCF\\u4E2A\\u5143\\u7D20\\uFF0C\\u518D\\u904D\\u5386\\u6BCF\\u4E2A\\u5143\\u7D20\\u4E0A\\u7684\\u52A8\\u753B\\u5217\\u8868\\uFF0C\\u9010\\u4E2A\\u6267\\u884C\\u3002\\u5177\\u4F53\\u64CD\\u4F5C\\u5C31\\u662F\\u627E\\u5230 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \".h5kit-element-anim\"), \" \\u8282\\u70B9\\uFF0C\\u6E05\\u6389\\u65E7\\u7684 class\\uFF0C\\u8BBE\\u7F6E inline style\\uFF08duration\\u3001delay\\u3001repeat\\u3001timing\\uFF09\\uFF0C\\u52A0\\u4E0A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"animate__animated\"), \" \\u548C\\u5BF9\\u5E94\\u7684\\u52A8\\u753B class\\uFF0C\\u76D1\\u542C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"animationend\"), \" \\u4E8B\\u4EF6\\u3002\"), mdx(\"p\", null, \"\\u7F16\\u8F91\\u5668\\u548C\\u64AD\\u653E\\u5668\\u6709\\u4E2A\\u533A\\u522B\\uFF1A\\u7F16\\u8F91\\u5668\\u91CC\\u52A8\\u753B\\u64AD\\u5B8C\\u540E\\u4F1A\\u6E05\\u6389 CSS class\\uFF0C\\u8BA9\\u5143\\u7D20\\u56DE\\u5230\\u521D\\u59CB\\u4F4D\\u7F6E\\u65B9\\u4FBF\\u7EE7\\u7EED\\u7F16\\u8F91\\uFF1B\\u64AD\\u653E\\u6A21\\u5F0F\\u4E0B\\u65E0\\u9650\\u5FAA\\u73AF\\u52A8\\u753B\\u4E0D\\u4F1A\\u76D1\\u542C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"animationend\"), \"\\uFF0C\\u8BA9\\u5B83\\u4E00\\u76F4\\u64AD\\u3002\"), mdx(\"h3\", null, \"3. \\u7FFB\\u9875\\u6548\\u679C\"), mdx(\"p\", null, \"\\u591A\\u9875\\u4E4B\\u95F4\\u7684\\u5207\\u6362\\u6548\\u679C\\u57FA\\u4E8E Swiper\\uFF0C\\u652F\\u6301 swiper\\u3001scroll\\u3001fade\\u3001cube\\u3001flip \\u4EE5\\u53CA 6 \\u79CD creative \\u6548\\u679C\\u3002\"), mdx(\"h2\", null, \"\\u4E94\\u3001\\u72B6\\u6001\\u7BA1\\u7406\"), mdx(\"p\", null, \"\\u81EA\\u5DF1\\u5199\\u4E86\\u4E00\\u4E2A\\u8F7B\\u91CF\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\u6846\\u67B6\\u53EB Novus\\uFF0C\\u6838\\u5FC3\\u601D\\u8DEF\\u7C7B\\u4F3C zustand \\u4F46\\u7B80\\u5355\\u5F88\\u591A\\u3002\"), mdx(\"p\", null, \"\\u4E24\\u4E2A Model\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"DesignModel\"), \"\\uFF1A\\u9875\\u9762\\u6570\\u636E\\u3001\\u5143\\u7D20\\u3001\\u64A4\\u9500\\u91CD\\u505A\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"ConfModel\"), \"\\uFF1A\\u753B\\u5E03\\u72B6\\u6001\\u3001\\u7126\\u70B9\\u3001\\u9762\\u677F\\u3001\\u5438\\u9644\\u8BBE\\u7F6E\")), mdx(\"p\", null, \"\\u8BA2\\u9605\\u673A\\u5236\\u7528\\u4E86\\u4F9D\\u8D56\\u6570\\u7EC4\\uFF0C\\u53EA\\u6709\\u6307\\u5B9A\\u7684 Model \\u53D8\\u4E86\\u624D\\u89E6\\u53D1\\u5BF9\\u5E94\\u7684\\u8BA2\\u9605\\u8005\\u3002\\u901A\\u77E5\\u8C03\\u5EA6\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"requestIdleCallback\"), \" \\u505A16ms \\u7684\\u65F6\\u95F4\\u5207\\u7247\\uFF0C\\u9632\\u6B62\\u77ED\\u65F6\\u95F4\\u5185\\u5927\\u91CF\\u72B6\\u6001\\u53D8\\u66F4\\u5BFC\\u81F4\\u6E32\\u67D3\\u98CE\\u66B4\\u3002\\u540C\\u4E00\\u4E2A\\u5FAE\\u4EFB\\u52A1\\u5185\\u7684\\u591A\\u6B21 setState \\u4F1A\\u5408\\u5E76\\u6210\\u4E00\\u6B21\\u901A\\u77E5\\u3002\"), mdx(\"p\", null, \"React \\u4FA7\\u63D0\\u4F9B\\u4E86 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"connect\"), \" HOC \\u548C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"useNovus\"), \" Hook\\uFF0CHook \\u91CC\\u7528 ES Proxy \\u505A\\u4E86\\u7B2C\\u4E00\\u8F6E\\u6E32\\u67D3\\u65F6\\u7684\\u81EA\\u52A8\\u4F9D\\u8D56\\u6536\\u96C6\\u3002\"), mdx(\"p\", null, \"\\u64A4\\u9500\\u91CD\\u505A\\u7EF4\\u62A4\\u4E86 undoList \\u548C redoList\\uFF0C\\u6700\\u591A 50 \\u6761\\u5386\\u53F2\\uFF0C\\u6BCF\\u6B21 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"updatePageWithHistory\"), \" \\u63A8\\u5165\\u5F53\\u524D\\u5FEB\\u7167\\u5E76\\u6E05\\u7A7A\\u91CD\\u505A\\u6808\\u3002\"), mdx(\"h2\", null, \"\\u516D\\u3001\\u9879\\u76EE\\u603B\\u7ED3\"), mdx(\"p\", null, \"\\u505A\\u4E0B\\u6765\\u6574\\u4F53\\u8FD8\\u662F\\u6BD4\\u8F83\\u987A\\u5229\\u7684\\uFF0C\\u6BD5\\u7ADF\\u9700\\u6C42\\u660E\\u786E\\uFF0C\\u4E0D\\u8FFD\\u6C42\\u5927\\u800C\\u5168\\u3002\\u56DE\\u5934\\u6765\\u770B\\u51E0\\u4E2A\\u6BD4\\u8F83\\u503C\\u5F97\\u8BB0\\u5F55\\u7684\\u70B9\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u4E2D\\u5FC3\\u70B9\\u5750\\u6807\\u7CFB\\u8FD9\\u4E2A\\u8BBE\\u8BA1\\u867D\\u7136\\u4E00\\u5F00\\u59CB\\u89C9\\u5F97\\u522B\\u626D\\uFF0C\\u4F46\\u540E\\u9762\\u65CB\\u8F6C\\u3001\\u5BF9\\u9F50\\u3001\\u5206\\u7EC4\\u90FD\\u56E0\\u6B64\\u7B80\\u5316\\u4E86\\u4E0D\\u5C11\\u903B\\u8F91\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u62D6\\u62FD\\u65F6\\u76F4\\u63A5\\u64CD\\u4F5C CSS \\u53D8\\u91CF\\u7ED5\\u8FC7 React\\uFF0C\\u8FD9\\u4E2A\\u4F18\\u5316\\u6548\\u679C\\u7ACB\\u7AFF\\u89C1\\u5F71\\uFF0C\\u753B\\u5E03\\u4E0A\\u51E0\\u5341\\u4E2A\\u5143\\u7D20\\u62D6\\u8D77\\u6765\\u4E5F\\u4E0D\\u4F1A\\u5361\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"SVG \\u6A21\\u677F\\u5F15\\u64CE\\u7B80\\u5355\\u4F46\\u591F\\u7528\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"{{expression}}\"), \" \\u7684\\u65B9\\u5F0F\\u8BA9\\u8BBE\\u8BA1\\u5E08\\u53EF\\u4EE5\\u7075\\u6D3B\\u5730\\u753B\\u5404\\u79CD\\u81EA\\u9002\\u5E94\\u56FE\\u5F62\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u4E09\\u7EA7\\u56FE\\u7247\\u8D44\\u6E90\\u67E5\\u627E\\uFF08blobs \\u2192 URL \\u2192 localForage\\uFF09\\u8986\\u76D6\\u4E86\\u79BB\\u7EBF\\u548C\\u5728\\u7EBF\\u573A\\u666F\")), mdx(\"p\", null, \"\\u540E\\u7EED\\u8BA1\\u5212\\u662F\\u8865\\u4E0A undo/redo \\u7684\\u5FEB\\u6377\\u952E\\u3001\\u652F\\u6301\\u66F4\\u591A SVG \\u6EE4\\u955C\\u9884\\u8BBE\\u3001\\u4EE5\\u53CA\\u628A diy \\u6A21\\u5F0F\\u4E0B\\u7684\\u4EA4\\u4E92\\u4F53\\u9A8C\\u518D\\u6253\\u78E8\\u4E00\\u4E0B\\u3002\\u6574\\u4F53\\u6765\\u8BF4\\uFF0C\\u5BF9\\u4E8E\\u4E00\\u4E2A\\u9762\\u5411 C \\u7AEF\\u7684\\u8F7B\\u91CF H5 \\u5B9A\\u5236\\u573A\\u666F\\uFF0C\\u8FD9\\u5957\\u65B9\\u6848\\u591F\\u7528\\u4E86\\u3002\\u76F8\\u6BD4\\u6D3B\\u52A8 H5 \\u7684\\u90A3\\u79CD\\u5E26\\u6709\\u6570\\u636E\\u8054\\u52A8\\u7684\\u5F62\\u5F0F\\uFF0C\\u8FD9\\u79CD\\u8FD8\\u662F\\u66F4\\u7B80\\u5355\\u4E9B\\uFF0C\\u4E0D\\u9700\\u8981\\u590D\\u6742\\u7684\\u53D6\\u503C\\u548C\\u6570\\u636E\\u540C\\u6B65\\u903B\\u8F91\\u3002\"), mdx(\"p\", null, \"\\u7D6E\\u7D6E\\u53E8\\u53E8\\u7684\\u6D41\\u6C34\\u8D26\\u8BB0\\u4E0B\\u6765\\uFF0C\\u611F\\u89C9\\u6BD4\\u5199\\u6587\\u6863\\u8FD8\\u8D39\\u52B2\\uFF0C\\u4E0D\\u8FC7\\u4E5F\\u7B97\\u662F\\u5BF9\\u81EA\\u5DF1\\u5DE5\\u4F5C\\u7684\\u4E00\\u4E2A\\u603B\\u7ED3\\u3002\"), mdx(\"p\", null, \"\\u5177\\u4F53\\u6548\\u679C\\u53EF\\u4EE5\\u524D\\u5F80\\u9884\\u89C8\\uFF1A\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://app.ubug.io/profess?mode=index\"\n }, \"H5 \\u62D6\\u653E\\u7F16\\u8F91\\u5668\")));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/prebundle/prebundle.md","id":"002e6cce-b11e-504d-9bcb-85a3af87ca5c","parent":{"name":"prebundle","sourceInstanceName":"blog"},"excerpt":"⚡想分享的是 webpack 中使用依赖预编译的手段优化编译环节，优化开发环境下的体验。从用缓存降低二次编译时间，到第三方依赖的预编译方案的需求和实践讨论，到具体的实际落地。 ps: 无论是 webpack4 的内存缓存、 hard-source-webpack-plugin 还是 webpack5 内置完善的 cache 方案，都能够在开发环境下将二次编译压缩到我们能够接受的时间，这篇文章的目的更多是在持久化缓存的基础上，探索更少的编译时间。 static_sites…","fields":{"title":"⚡ 优化 webpack 开发体验以及依赖预编译方案","slug":"/blog/prebundle","description":"大型复杂项目的编译优化，提升开发体验，编译时长从 120s 到 10s，我发现了什么。","date":"2022-05-25","redirects":null,"datetime":"2022-05-25 11:09:40","categories":["code"],"series":null,"tags":["整理","功能","Webpack","prebundle"],"status":"online"},"frontmatter":{"published":null,"tags":["整理","功能","Webpack","prebundle"],"theme":null,"slug":"prebundle","date":"2022-05-25 11:09:40"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"prebundle\",\n \"title\": \"⚡ 优化 webpack 开发体验以及依赖预编译方案\",\n \"date\": \"2022-05-25 11:09:40\",\n \"author\": \"Ubug\",\n \"description\": \"大型复杂项目的编译优化，提升开发体验，编译时长从 120s 到 10s，我发现了什么。\",\n \"categories\": [\"code\"],\n \"tags\": [\"整理\", \"功能\", \"Webpack\", \"prebundle\"]\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"p\", null, \"\\u26A1\\u60F3\\u5206\\u4EAB\\u7684\\u662F webpack \\u4E2D\\u4F7F\\u7528\\u4F9D\\u8D56\\u9884\\u7F16\\u8BD1\\u7684\\u624B\\u6BB5\\u4F18\\u5316\\u7F16\\u8BD1\\u73AF\\u8282\\uFF0C\\u4F18\\u5316\\u5F00\\u53D1\\u73AF\\u5883\\u4E0B\\u7684\\u4F53\\u9A8C\\u3002\\u4ECE\\u7528\\u7F13\\u5B58\\u964D\\u4F4E\\u4E8C\\u6B21\\u7F16\\u8BD1\\u65F6\\u95F4\\uFF0C\\u5230\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u7684\\u9884\\u7F16\\u8BD1\\u65B9\\u6848\\u7684\\u9700\\u6C42\\u548C\\u5B9E\\u8DF5\\u8BA8\\u8BBA\\uFF0C\\u5230\\u5177\\u4F53\\u7684\\u5B9E\\u9645\\u843D\\u5730\\u3002\"), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"ps: \\u65E0\\u8BBA\\u662F webpack4 \\u7684\\u5185\\u5B58\\u7F13\\u5B58\\u3001 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"hard-source-webpack-plugin\"), \" \\u8FD8\\u662F webpack5 \\u5185\\u7F6E\\u5B8C\\u5584\\u7684 cache \\u65B9\\u6848\\uFF0C\\u90FD\\u80FD\\u591F\\u5728\\u5F00\\u53D1\\u73AF\\u5883\\u4E0B\\u5C06\\u4E8C\\u6B21\\u7F16\\u8BD1\\u538B\\u7F29\\u5230\\u6211\\u4EEC\\u80FD\\u591F\\u63A5\\u53D7\\u7684\\u65F6\\u95F4\\uFF0C\\u8FD9\\u7BC7\\u6587\\u7AE0\\u7684\\u76EE\\u7684\\u66F4\\u591A\\u662F\\u5728\\u6301\\u4E45\\u5316\\u7F13\\u5B58\\u7684\\u57FA\\u7840\\u4E0A\\uFF0C\\u63A2\\u7D22\\u66F4\\u5C11\\u7684\\u7F16\\u8BD1\\u65F6\\u95F4\\u3002\")), mdx(\"p\", null, \"static_sites \\u9879\\u76EE\\u662F\\u4F5C\\u4E3A\\u5F88\\u591A\\u5C0F\\u9879\\u76EE\\u7684\\u96C6\\u5408\\uFF0C\\u76EE\\u7684\\u662F\\u56E0\\u4E3A\\u4EE5\\u524D\\u6BCF\\u4E2A\\u9879\\u76EE\\u90FD\\u5F00\\u4E2A\\u4ED3\\u5E93\\uFF0CNode\\u3001\\u4F9D\\u8D56\\u4E4B\\u7C7B\\u7684\\u5347\\u7EA7\\uFF0C\\u5BFC\\u81F4\\u5F88\\u96BE\\u7EF4\\u62A4\\uFF0C\\u6240\\u4EE5\\u540E\\u6765\\u5C31\\u521B\\u5EFA\\u4E86\\u8FD9\\u4E2A\\u9879\\u76EE\\u3002\"), mdx(\"p\", null, \"\\u867D\\u7136\\u6574\\u4E2A\\u9879\\u76EE\\u6CA1\\u6709\\u591A\\u590D\\u6742\\uFF0C\\u4E0D\\u50CF\\u662F\\u5F88\\u591A\\u4E00\\u7EBF\\u516C\\u53F8\\u6570\\u767E\\u4E2A\\u9875\\u9762\\u90A3\\u79CD\\uFF0C\\u4F46\\u662F\\u4ECD\\u7136\\u6D89\\u53CA\\u5230\\u51E0\\u5341\\u4E2A\\u5C0F\\u9879\\u76EE\\uFF0C\\u6709\\u975E\\u5E38\\u591A\\u7684\\u4F9D\\u8D56\\uFF0C\\u622A\\u6B62\\u5230\\u5F53\\u524D\\u5DF2\\u7ECF\\u5C06\\u8FD1\\u4E0A\\u4E07\\u7684\\u7F16\\u8BD1\\u6A21\\u5757\\u6570\\u91CF\\u4E86\\uFF0C\\u5F00\\u53D1\\u548C\\u6253\\u5305\\u65F6\\u95F4\\u5728\\u5355\\u673A\\u4E0A\\u5DF2\\u7ECF\\u5F88\\u5F71\\u54CD\\u4F53\\u9A8C\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u540E\\u6765\\u4F18\\u5316\\u4E86\\u4E00\\u6B21\\uFF0C\\u5F15\\u5165\\u4E86 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"hard-source-webpack-plugin\"), \" \\u7684\\u5F3A\\u5236\\u7F13\\u5B58\\u7B56\\u7565\\uFF0C\\u5728\\u6CA1\\u6709\\u7279\\u522B\\u5927\\u7F13\\u5B58\\u53D8\\u52A8\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5F00\\u53D1\\u73AF\\u5883\\u4E0B\\u5305\\u62EC\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u76848000\\u4E2A\\u6A21\\u5757\\u9996\\u6B21\\u7F16\\u8BD1\\u8017\\u65F650s\\uFF0C\\u4E8C\\u6B21\\u7F16\\u8BD1\\u8017\\u65F6\\u63A7\\u5236\\u5728\\u4E8615s\\u4EE5\\u5185\\uFF0C\\u70ED\\u66F4\\u65B0\\u5F71\\u54CD\\u4E0D\\u5927\\uFF0C\\u6240\\u4EE5\\u6CA1\\u7279\\u522B\\u7559\\u610F\\u3002\\u4ECE\\u5934\\u7684\\u6253\\u5305\\u65F6\\u95F4\\u4ECD\\u7136\\u5F88\\u96BE\\u770B\\u3002\"), mdx(\"p\", null, \"\\u5F88\\u597D\\u4F46\\u662F\\u8FD8\\u662F\\u4E0D\\u591F\\u597D\\u3002\\u6BCF\\u6B21\\u5F00\\u53D1\\u73AF\\u5883\\u542F\\u52A8\\u90FD\\u9700\\u8981\\u90A3\\u4E48\\u4E45\\u65F6\\u95F4\\uFF0C\\u6BCF\\u6B21\\u542F\\u52A8\\u9879\\u76EE\\u6572\\u5B8C\\u547D\\u4EE4\\u8FD8\\u8981\\u7B49\\u4E2A\\u51E0\\u5341\\u79D2\\uFF1FNo Way....\\u3002\"), mdx(\"p\", null, \"\\u9664\\u4E86\\u6027\\u80FD\\u4F18\\u5316\\uFF0C\\u4E5F\\u505A\\u4E86\\u4E00\\u4E2A\\u63D2\\u4EF6\\u6765\\u663E\\u793A\\u4E0D\\u540C entry \\u7684\\u7F16\\u8BD1\\u8FDB\\u5EA6\\uFF0C\\u5206\\u6790\\u663E\\u793A\\u4E0A\\u4E07\\u4E2A\\u6A21\\u5757\\u7684\\u7F16\\u8BD1\\u8FDB\\u5EA6\\u3001\\u5173\\u952E\\u8017\\u65F6\\u6A21\\u5757\\u3001\\u8017\\u65F6\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u7B49\\uFF0C\\u5206\\u6790\\u4E86\\u4E0B\\u786E\\u5B9E\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u5360\\u7528\\u4E86\\u5F88\\u591A\\u7684\\u7F16\\u8BD1\\u65F6\\u95F4\\uFF0C\\u662F\\u65F6\\u5019\\u505A\\u70B9\\u4EC0\\u4E48\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u5148\\u770B\\u7ED3\\u679C\\uFF08\\u5747\\u4E3A\\u5F00\\u53D1\\u73AF\\u5883\\uFF09\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"// ========== \\u4EC5 webpack5 + inner cache system\\n\\u9996\\u6B21\\u7F16\\u8BD1\\u8017\\u65F6:\\nsetup 85ms\\nbuilding 97921ms\\nsealing 3279ms\\nemitting 393ms\\n\\n\\u4E8C\\u6B21\\u7F16\\u8BD1\\u8017\\u65F6:\\nsetup 27ms\\nbuilding 11231ms\\nsealing 1351ms\\nemitting 70ms\\n\\n// ========== \\u914D\\u7F6E prebundle \\u673A\\u5236\\n\\n\\u65E0\\u7F13\\u5B58\\u7F16\\u8BD1 49s\\n\\u4E8C\\u6B21\\u7F16\\u8BD1 10s\\n\\u4E09\\u6B21\\u7F16\\u8BD1 10s\\n\\n// ========== \\u5C06 prebundle \\u540C\\u6B65\\u5230\\u53E6\\u4E00\\u53F0\\u673A\\u5668\\n\\n\\u5E26\\u7F13\\u5B58\\u7F16\\u8BD1 12s\\n\\u4E8C\\u6B21\\u7F16\\u8BD1 10s\\n\\u4E8C\\u6B21\\u7F16\\u8BD1 10s\\n\")), mdx(\"h2\", null, \"\\u4E00\\u3001webpack5\"), mdx(\"p\", null, \"\\u4E4B\\u524D CRA \\u81EA\\u5E26\\u7684\\u662F webpack4\\uFF0Cwebpack5 \\u5DF2\\u7ECF\\u53D1\\u5E03\\u4E86\\u5F88\\u957F\\u4E00\\u6BB5\\u65F6\\u95F4\\u4E86\\uFF0C\\u6574\\u4E2A\\u793E\\u533A\\u89C2\\u671B\\u4E5F\\u8DB3\\u591F\\u4E86\\uFF0C\\u60F3\\u7740\\u80FD\\u4E0D\\u80FD\\u8FC1\\u79FB\\u8FC7\\u53BB\\uFF0C\\u4E00\\u662F\\u4E3A\\u4E86\\u4F18\\u5316\\u7F16\\u8BD1\\u7684\\u901F\\u5EA6\\u548C\\u4F53\\u9A8C\\uFF0C\\u53E6\\u4E00\\u65B9\\u9762\\u4E5F\\u662F\\u4E3A\\u4E86\\u9002\\u914D\\u6700\\u65B0\\uFF0C\\u4EE5\\u4FBF\\u4EE5\\u540E\\u957F\\u671F\\u7684\\u4F7F\\u7528\\u3002\"), mdx(\"p\", null, \"webpack5 \\u76F8\\u6BD4 4 \\u8F83\\u5927\\u7684\\u63D0\\u5347\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5185\\u7F6E\\u7684\\u589E\\u52A0\\u6301\\u4E45\\u5316\\u7F13\\u5B58\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7528\\u66F4\\u7A33\\u5B9A\\u7684 hash \\u5B9E\\u73B0\\u6709\\u6548\\u7684\\u957F\\u671F\\u7F13\\u5B58\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u66F4\\u597D\\u7684 Tree Shaking \\u548C\\u4EE3\\u7801\\u751F\\u6210\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5185\\u7F6E\\u793E\\u533A\\u975E\\u5E38\\u591A\\u7684\\u6700\\u4F73\\u5B9E\\u8DF5\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4F18\\u5316\\u6280\\u672F\\u67B6\\u6784\\u4EE5\\u4FBF\\u4EE5\\u540E\\u66F4\\u597D\\u7684\\u6269\\u5C55\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u65B0\\u7279\\u6027\\uFF1A\\u6A21\\u5757\\u8054\\u90A6\\u3001\\u5185\\u7F6E\\u8D44\\u6E90 loader\\u3001\\u5185\\u7F6E worker loader\\u3001\\u5185\\u7F6E json loader\\u3001\\u81EA\\u52A8\\u5904\\u7406 WebAssembly \\u7B49\\u5F02\\u6B65\\u6A21\\u5757\\u3001import \\u652F\\u6301 URI \\u534F\\u8BAE\\u3001\\u8FDB\\u5EA6\\u663E\\u793A\\u4F18\\u5316\")), mdx(\"p\", null, \"\\u6240\\u4EE5 webpack5 \\u786E\\u5B9E\\u5185\\u7F6E\\u89E3\\u51B3\\u4E86\\u4E4B\\u524D\\u6211\\u4EEC\\u9047\\u5230\\u7684\\u4E00\\u4E9B\\u8FEB\\u5207\\u95EE\\u9898\\uFF0C\\u56E0\\u4E3A eject \\u51FA\\u6765\\u7684\\u914D\\u7F6E\\uFF0C\\u6240\\u4EE5\\u5C06\\u9879\\u76EE\\u5DE5\\u5177\\u4F9D\\u8D56\\u5347\\u7EA7\\u82B1\\u8D39\\u4E86\\u70B9\\u65F6\\u95F4\\u3002\\u6700\\u540E\\u7ED3\\u679C\\u8BF4\\u5B9E\\u8BDD\\u5E76\\u6CA1\\u6709\\u63D0\\u5347\\u591A\\u4E48\\u660E\\u663E\\uFF0C\\u7F13\\u5B58\\u53EA\\u662F\\u66FF\\u6362\\u4E86\\u5916\\u90E8\\u7684\\u65B9\\u6848\\uFF0C\\u5F88\\u591A\\u6700\\u4F73\\u5B9E\\u8DF5\\u4E5F\\u5E76\\u6CA1\\u6709\\u628A\\u7F16\\u8BD1\\u65B9\\u6848\\u53D8\\u9769\\u591A\\u5938\\u5F20\\uFF0C\\u6700\\u5173\\u5FC3\\u7684\\u7F16\\u8BD1\\u903B\\u8F91\\u4ECD\\u7136\\u662F babel \\u7F16\\u8BD1\\u4E00\\u5207\\u3002\"), mdx(\"p\", null, \"\\u7F16\\u8BD1\\u65F6\\u95F4\\u56E0\\u4E3A webpack4 hack \\u4E86\\u4E00\\u4E9B\\u6301\\u4E45\\u903B\\u8F91\\uFF0C\\u6240\\u4EE5\\u8FD9\\u91CC\\u63D0\\u5347\\u6CA1\\u90A3\\u4E48\\u660E\\u663E\\u3002\\u56E0\\u4E3A\\u8FD9\\u4E9B\\u6301\\u4E45\\u7F13\\u5B58\\u903B\\u8F91\\u7F13\\u5B58\\u7684\\u90FD\\u662F\\u8FC7\\u7A0B\\u4EE3\\u7801\\uFF0C\\u6240\\u4EE5\\u6CA1\\u6709\\u5171\\u4EAB\\u591A\\u53F0\\u673A\\u5668\\u7684\\u529E\\u6CD5\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001esbuild \\u4ECB\\u5165\"), mdx(\"p\", null, \"esbuild \\u5DF2\\u7ECF\\u53D1\\u5E03\\u5F88\\u4E45\\u4E86\\uFF0C\\u5BF9\\u7F16\\u8BD1\\u7684\\u4F18\\u5316\\u4E5F\\u662F\\u6BCB\\u5EB8\\u7F6E\\u7591\\u7684\\uFF0C\\u9664\\u4E86\\u6CA1\\u529E\\u6CD5\\u548C webpack \\u8FD9\\u79CD\\u5927\\u800C\\u5168\\u4E14\\u5386\\u7ECF\\u5927\\u89C4\\u6A21\\u6D4B\\u8BD5\\u7684\\u5DE5\\u5177\\u76F8\\u6BD4\\uFF0C\\u6BD5\\u7ADF\\u672F\\u4E1A\\u6709\\u4E13\\u653B\\uFF0C\\u88AB webpack \\u7684\\u751F\\u6001\\u517B\\u5201\\u4E86\\u7684\\u624B\\uFF0C\\u8FD8\\u662F\\u60F3\\u8981\\u4EC0\\u4E48\\u90FD\\u6709\\u73B0\\u6210\\u7684\\u3002\"), mdx(\"p\", null, \"\\u5355\\u72EC\\u4F7F\\u7528 esbuild \\u4F5C\\u4E3A bundler \\u6253\\u5305\\u5668\\u6765\\u8BF4\\uFF0C\\u5F88\\u591A\\u6587\\u4EF6\\u7C7B\\u578B\\u4E0D\\u652F\\u6301\\u3001\\u4E0D\\u652F\\u6301 code splite\\u3001ast \\u7F3A\\u5931\\u7B49\\u7B49\\uFF0C\\u76F4\\u63A5\\u7528\\u6765\\u7F16\\u8BD1\\u9879\\u76EE\\u76EE\\u524D\\u8FD8\\u662F\\u4E0D\\u592A\\u53CB\\u597D\\u7684\\uFF0C\\u800C\\u4E14\\u9879\\u76EE\\u4E2D\\u7528\\u4E86\\u5F88\\u591A webpack \\u63D2\\u4EF6\\uFF0Cesbuild \\u751F\\u6001\\u76F4\\u63A5\\u5207\\u6362\\u8FD8\\u662F\\u6709\\u96BE\\u5EA6\\u7684\\u3002\"), mdx(\"p\", null, \"esbuild \\u901A\\u8FC7\\u5F7B\\u5E95\\u653E\\u5F03\\u5BF9cjs tree shaking\\u7684\\u652F\\u6301\\u6765\\u66F4\\u597D\\u7684\\u517C\\u5BB9cjs\\uFF0C\\u5E76\\u4E14\\u540C\\u65F6\\u53EF\\u4EE5\\u5728\\u4E0D\\u5F15\\u5165\\u63D2\\u4EF6\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u76F4\\u63A5\\u4F7F\\u5F97web bundler\\u4E0B\\u652F\\u6301cjs\\u3002\"), mdx(\"p\", null, \"esbuild \\u6709\\u4E09\\u4E2A\\u5177\\u4F53\\u7684\\u529F\\u80FD\\u65B9\\u5411\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6253\\u5305\\u5668: bundler\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7F16\\u8BD1\\u5668: transformer\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u538B\\u7F29\\u5668: minifier\")), mdx(\"p\", null, \"\\u7F16\\u8BD1\\u5668\\u3001\\u538B\\u7F29\\u5668\\u8FD9\\u90E8\\u5206\\u5DE5\\u4F5C\\u53EF\\u4EE5\\u4F7F\\u7528 esbuild-loader \\u6765\\u52A0\\u901F webpack \\u91CC\\u9762\\u7684\\u65E7\\u903B\\u8F91\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001\\u4F9D\\u8D56\\u9884\\u7F16\\u8BD1\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"node \\u73AF\\u5883\\u4E0B\\u7684 prebundle \\u662F\\u4E00\\u4E2A\\u4E0D\\u540C\\u7684\\u95EE\\u9898\\uFF0C\\u8FD9\\u91CC\\u53EA\\u662F\\u8BB2 web \\u5F00\\u53D1\\u73AF\\u5883\\u4E0B\\u7684\\u65B9\\u6848\\u3002\")), mdx(\"p\", null, \"\\u592A\\u957F\\u4E0D\\u770B\\uFF1A\\u5C06\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u6574\\u4F53\\u63D0\\u524D\\u6253\\u5305\\uFF0C\\u5C0F\\u5FC3\\u5904\\u7406\\u4F9D\\u8D56\\u5171\\u4EAB\\u3001\\u5FAA\\u73AF\\u548C\\u4E92\\u76F8\\u4F9D\\u8D56\\u95EE\\u9898\\uFF0C\\u7136\\u540E\\u8BA9\\u6253\\u5305\\u5DE5\\u5177\\u5728\\u5F00\\u53D1\\u9636\\u6BB5\\u76F4\\u63A5\\u4F7F\\u7528\\u63D0\\u524D\\u6253\\u5305\\u7684\\u4EA7\\u7269\\uFF0C\\u8DF3\\u8FC7\\u5197\\u957F\\u7684\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u6253\\u5305\\u8FC7\\u7A0B\\uFF0C\\u53EA\\u7F16\\u8BD1\\u6253\\u5305\\u4E1A\\u52A1\\u4EE3\\u7801\\uFF0C\\u8282\\u7701\\u5F00\\u53D1\\u6A21\\u5F0F\\u4E0B\\u7684\\u6574\\u4F53\\u65F6\\u95F4\\u3002\"), mdx(\"p\", null, \"\\u5728\\u7F16\\u8BD1\\u8017\\u65F6\\u4F18\\u5316\\u65B9\\u9762\\uFF0C\\u6709\\u5F88\\u591A\\u793E\\u533A\\u63A2\\u7D22\\uFF0C\\u57FA\\u672C\\u4E0A\\u90FD\\u662F\\u5BF9\\u6253\\u5305\\u4F53\\u79EF\\u3001\\u672C\\u5730\\u786C\\u76D8\\u7F13\\u5B58\\u3001\\u5185\\u5B58\\u7F13\\u5B58\\u3001\\u7F16\\u8BD1\\u5B89\\u5168\\u3001\\u7F13\\u5B58\\u6709\\u6548\\u671F\\u7B49\\u4E4B\\u95F4\\u7684\\u5E73\\u8861\\uFF0Cwebpack \\u672C\\u8EAB\\u4E5F\\u662F\\u4E00\\u4E2A\\u5F02\\u5E38\\u5F00\\u653E\\u7684\\u67B6\\u6784\\uFF0C\\u5141\\u8BB8\\u8FD9\\u4E9B\\u5B9E\\u8DF5\\u7684\\u767E\\u82B1\\u9F50\\u653E\\u3002\"), mdx(\"p\", null, \"\\u4E4B\\u524D\\u5BF9\\u9879\\u76EE\\u7F16\\u8BD1\\u4F18\\u5316\\u7684\\u65F6\\u5019\\uFF0C\\u5C06\\u6A21\\u5757\\u7684\\u7F16\\u8BD1\\u65F6\\u95F4\\u5355\\u72EC\\u5206\\u6790\\u4E86\\u4E00\\u4E0B\\uFF0C\\u7F16\\u8BD1\\u65F6\\u95F4\\u8D85\\u8FC7 1s \\u7684\\u4F9D\\u8D56\\u90FD\\u8BE6\\u5C3D\\u7684\\u8BB0\\u5F55\\u4E86\\u4E0B\\u6765\\uFF0C\\u53D1\\u73B0\\u6709\\u5F88\\u591A\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u5728\\u5F00\\u53D1\\u73AF\\u5883\\u542F\\u52A8\\u7684\\u65F6\\u5019\\u7F16\\u8BD1\\u633A\\u8017\\u65F6\\u7684\\uFF0C\\u4E00\\u76F4\\u60F3\\u7740\\u8FD9\\u5757\\u600E\\u4E48\\u80FD\\u4F18\\u5316\\u4E00\\u4E0B\\u3002\"), mdx(\"p\", null, \"\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u4E3A\\u4EC0\\u4E48\\u8981\\u7F16\\u8BD1\\u5462\\uFF1F\\u56E0\\u4E3A\\u6211\\u4EEC\\u4F7F\\u7528\\u4E86\\u4ED6\\u7684 export \\u5BFC\\u51FA\\uFF0C\\u4E0D\\u50CF\\u662F\\u5F88\\u4E45\\u4E4B\\u524D\\u4E00\\u4E2A min \\u6587\\u4EF6\\u5F15\\u5165\\u5373\\u53EF\\uFF0C\\u73B0\\u4EE3\\u7684\\u6253\\u5305\\u624B\\u6BB5\\u80FD\\u591F\\u5206\\u6790\\u51FA\\u7528\\u5230\\u4E86\\u54EA\\u4E9B\\u3001\\u6CA1\\u7528\\u54EA\\u4E9B\\u5BFC\\u51FA\\uFF0C\\u6309\\u9700\\u6253\\u5305\\uFF0C\\u6700\\u540E\\u751F\\u6210\\u4EE3\\u7801\\u7684\\u65F6\\u5019\\u751A\\u81F3\\u80FD\\u591F tree-shaking \\u6389\\u6CA1\\u7528\\u7684\\u4EE3\\u7801\\uFF0C\\u8FD9\\u4E9B\\u90FD\\u662F\\u5BF9\\u6253\\u5305\\u4F53\\u79EF\\u7684\\u4F18\\u5316\\u3002\\u6BD4\\u5982\\u6574\\u4E2A Antd \\u6216\\u8005 lodash \\u4E4B\\u7C7B\\u7684\\u5E93\\u6216\\u8005\\u6846\\u67B6\\uFF0C\\u5982\\u679C\\u4E0D\\u5F15\\u5165\\u4F9D\\u8D56\\u5206\\u6790\\uFF0C\\u76F4\\u63A5\\u5168\\u90E8\\u6253\\u5305\\u7684\\u8BDD\\uFF0C\\u90A3\\u5305\\u4F53\\u79EF\\u5C06\\u4F1A\\u7206\\u70B8\\u7684\\u3002\\u9664\\u6B64\\u4E4B\\u5916\\uFF0C\\u6211\\u4EEC\\u8FD8\\u53EF\\u4EE5\\u4ECE\\u6E90\\u7801\\u51FA\\u53D1\\u7F16\\u8BD1\\u51FA\\u6211\\u4EEC\\u7684\\u76EE\\u6807\\u5E73\\u53F0\\u9002\\u914D\\u4EE3\\u7801\\uFF0C\\u751F\\u6210\\u7684\\u8D44\\u6E90\\u66F4\\u53EF\\u63A7\\u3002\"), mdx(\"p\", null, \"\\u4E0D\\u8FC7\\u5F00\\u53D1\\u73AF\\u5883\\u4E0B\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u7F16\\u8BD1\\u8017\\u65F6\\u7684\\u95EE\\u9898\\u5BF9\\u4E8E\\u5927\\u578B\\u9879\\u76EE\\u786E\\u786E\\u5B9E\\u5B9E\\u662F\\u4E2A\\u95EE\\u9898\\uFF0C\\u6BD5\\u7ADF\\u5F00\\u53D1\\u73AF\\u5883\\u4E0B\\uFF0C\\u901F\\u5EA6\\u6BD4\\u4F53\\u79EF\\u66F4\\u4F18\\u5148\\uFF0C\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u5728\\u5F00\\u53D1\\u671F\\u95F4\\u5E76\\u4E0D\\u9700\\u8981 tree-shaking\\uFF0C\\u4EE3\\u7801\\u51E0\\u4E4E\\u4E0D\\u4F1A\\u53D8\\u52A8\\uFF0C\\u4E3A\\u4EC0\\u4E48\\u4E0D\\u7528\\u6700\\u5FEB\\u6700\\u7B80\\u5355\\u7684\\u63D0\\u524D\\u6253\\u5305\\u5462\\uFF1F\"), mdx(\"h4\", null, \"2.1 \\u7F16\\u8BD1\\u7F13\\u5B58\\u4E0D\\u591F\\u597D\\u5417\"), mdx(\"p\", null, \"\\u65E0\\u8BBA\\u662F webpack4 \\u7684\\u5185\\u5B58\\u7F13\\u5B58\\u3001 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"hard-source-webpack-plugin\"), \" \\u8FD8\\u662F webpack5 \\u5185\\u7F6E\\u5B8C\\u5584\\u7684 cache \\u65B9\\u6848\\uFF0C\\u90FD\\u80FD\\u591F\\u6781\\u5927\\u7684\\u5C06\\u4E8C\\u6B21\\u7F16\\u8BD1\\u538B\\u7F29\\u5230\\u6781\\u81F4\\uFF0C\\u5728\\u7F13\\u5B58\\u5B89\\u5168\\u548C\\u6027\\u80FD\\u4E0A\\u90FD\\u80FD\\u591F\\u6EE1\\u8DB3\\u6211\\u4EEC\\u7684\\u4F7F\\u7528\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u7167\\u7740\\u73B0\\u5728\\u56FD\\u5185\\u793E\\u533A\\u7684\\u67B6\\u52BF\\u80AF\\u5B9A\\u6709\\u4EBA\\u8BF4\\uFF1A\\u4F60\\u8FD9\\u5565\\u90FD\\u4E0D\\u61C2\\uFF0C\\u751F\\u4EA7\\u73AF\\u5883\\u7F16\\u8BD1\\u4F53\\u9A8C\\u4E0D\\u91CD\\u8981\\uFF0C\\u7F16\\u8BD1\\u8D85\\u8FC7 30 \\u5206\\u949F\\u4E0A CI/CD \\u554A\\u3001\\u5B8C\\u5584\\u5236\\u54C1\\u7BA1\\u7406\\u6D41\\u7A0B\\uFF0C\\u5347\\u7EA7\\u6253\\u5305\\u670D\\u52A1\\u5668 CPU \\u554A\\u3002\\u9879\\u76EE\\u81A8\\u80C0\\uFF1F\\u90A3\\u662F\\u4F60\\u9879\\u76EE\\u4E0D\\u5BF9\\u3002\\u5F00\\u53D1\\u4F53\\u9A8C\\u6709\\u7F13\\u5B58\\u5C31\\u591F\\u4E86\\u3002\\u9884\\u7F16\\u8BD1\\u6CA1\\u7528\\uFF0C\\u6309\\u9700\\u7F16\\u8BD1\\u624D\\u5BF9\\u3002\\u73B0\\u5728\\u6CA1\\u6761\\u4EF6\\uFF0C\\u90A3\\u7B49\\u793E\\u533A\\u5B8C\\u5584\\u554A\\u3002\\u5FAE\\u5E94\\u7528\\u6A21\\u5757\\u62C6\\u5206\\u5355\\u72EC\\u6253\\u5305\\u4E5F\\u6CA1\\u610F\\u4E49\\u3002\\u4F60\\u673A\\u5668\\u4E0D\\u884C\\u3001\\u516C\\u53F8\\u57FA\\u5EFA\\u4E0D\\u884C\\u3001\\u516C\\u53F8\\u6846\\u67B6\\u4E0D\\u884C\\uFF0C\\u4F60\\u53BB\\u7814\\u7A76xxx\\u5427\\u3001\\u4F60\\u7406\\u89E3\\u6709\\u95EE\\u9898\\u3001\\u4F60\\u591A\\u5199\\u70B9\\u4EE3\\u7801\\u3002\"), mdx(\"p\", null, \"\\u975E\\u5E38\\u591A\\u7684\\u5730\\u65B9\\u7684\\u8BA8\\u8BBA\\u6C14\\u6C1B\\u90FD\\u7279\\u522B\\u8BA9\\u4EBA\\u611F\\u89C9\\u8FDB\\u4E86\\u65E9\\u5E74 QQ \\u7FA4\\uFF0C\\u53CD\\u6B63\\u597D\\u50CF\\u662F\\u53EA\\u8981\\u6CA1\\u9047\\u5230\\u7684\\u95EE\\u9898\\uFF0C\\u522B\\u4EBA\\u5C31\\u4E0D\\u5E94\\u8BE5\\u6298\\u817E\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u4EBA\\u603B\\u662F\\u4E0D\\u77E5\\u8DB3\\uFF0C\\u4EC0\\u4E48\\u90FD\\u60F3\\u8981\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7F13\\u5B58\\u4ECD\\u7136\\u9700\\u8981\\u4E00\\u4E2A\\u8017\\u65F6\\u7684\\u9996\\u6B21\\u7F16\\u8BD1\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u9ED1\\u76D2\\u7684\\u8FC7\\u7A0B\\u7F13\\u5B58\\u6CA1\\u6709\\u4EE3\\u7801\\u7EA7\\u610F\\u4E49\\uFF0C\\u81EA\\u7136\\u4E5F\\u5F88\\u96BE\\u5171\\u4EAB\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u751F\\u4EA7\\u73AF\\u5883\\u65E0\\u6CD5\\u6536\\u76CA\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6709\\u6BD4 webpack \\u66F4\\u5FEB\\u7684\\u7F16\\u8BD1\\u65B9\\u6CD5\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u66F4\\u5C0F\\u7684\\u5185\\u5B58\\u5360\\u7528\")), mdx(\"h3\", null, \"2.1 \\u4E4B\\u524D\\u7684\\u76F8\\u4F3C\\u65B9\\u6848\"), mdx(\"h4\", null, \"DLLPlugin\"), mdx(\"p\", null, \"DllPlugin \\u7B97\\u662F\\u52A8\\u6001\\u94FE\\u63A5\\u7684\\u5B9E\\u73B0\\uFF0C\\u80FD\\u591F\\u901A\\u8FC7\\u914D\\u7F6E\\uFF0C\\u5C06\\u7B2C\\u4E09\\u65B9\\u7684\\u4F9D\\u8D56\\u5355\\u72EC\\u63D0\\u524D\\u6253\\u5305\\uFF0C\\u751F\\u6210\\u7D22\\u5F15\\u5173\\u7CFB\\uFF0C\\u7136\\u540E\\u4EA4\\u7ED9 webpack \\u6765\\u8DF3\\u8FC7\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u7684\\u6253\\u5305\\uFF0C\\u80FD\\u591F\\u8282\\u7701\\u5F88\\u591A\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u7684\\u9891\\u7E41\\u5904\\u7406\\uFF0C\\u5B9E\\u9645\\u8BC1\\u660E\\u4E5F\\u786E\\u5B9E\\u80FD\\u591F\\u6781\\u5927\\u7684\\u4F18\\u5316\\u7F16\\u8BD1\\u65F6\\u95F4\\u3002\"), mdx(\"p\", null, \"\\u5F88\\u591A\\u7684\\u7B2C\\u4E09\\u65B9\\u5E93\\u5305\\u62EC React \\u548C Vue \\u90FD\\u653E\\u5F03\\u4E86 DLL\\uFF0C\\u6240\\u4EE5\\u597D\\u591A\\u4EBA\\u90FD\\u8BF4 DLL \\u662F\\u8FC7\\u53BB\\u65F6\\uFF0C\\u4E0D\\u80FD\\u518D\\u7528\\u4E86\\u3002\\u6211\\u5012\\u89C9\\u5F97\\u53EA\\u662F\\u65B9\\u6848\\u4E0D\\u540C\\uFF0C\\u6709\\u4E9B\\u65B9\\u6848\\u662F\\u5C06\\u7F16\\u8BD1\\u7ED3\\u679C\\u7F13\\u5B58\\u4ECE\\u800C\\u8DF3\\u8FC7\\u9891\\u7E41\\u7F16\\u8BD1\\uFF0CDLL \\u662F\\u5C06\\u7F16\\u8BD1\\u7ED3\\u679C\\u751F\\u6210\\u5230\\u4E86 bundle\\uFF0C\\u90FD\\u662F\\u80FD\\u591F\\u4F18\\u5316\\u7F16\\u8BD1\\u65F6\\u95F4\\u7684\\uFF0C\\u4E00\\u4E2A\\u7F13\\u5B58\\u4E86\\u8FC7\\u7A0B\\u9ED1\\u76D2\\uFF0C\\u4E00\\u4E2A\\u7F13\\u5B58\\u4E86\\u6700\\u7EC8\\u7ED3\\u679C\\uFF0C\\u4E24\\u4E2A\\u4E0D\\u540C\\u7684\\u6280\\u672F\\u7F13\\u5B58\\u65B9\\u5411\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F DllPlugin \\u8FD8\\u662F\\u5B58\\u5728\\u8F83\\u591A\\u95EE\\u9898\\u7684\\uFF0C\\u901A\\u7528\\u6027\\u4E0D\\u597D\\u3001\\u914D\\u7F6E\\u590D\\u6742\\uFF0C\\u4F9D\\u8D56\\u4E0D\\u597D\\u5904\\u7406\\u3001\\u6D41\\u7A0B\\u4FB5\\u5165\\u5F3A\\u7B49\\uFF0C\\u65E0\\u6CD5\\u6309\\u9700\\u52A0\\u8F7D\\uFF0C\\u591A\\u5E94\\u7528\\u65E0\\u6CD5\\u5171\\u7528\\uFF0C\\u7F3A\\u4E4F\\u52A8\\u6001\\u6027\\u7684\\u7279\\u70B9\\u3002\\u5B9E\\u9645\\u7528 DLL \\u6765\\u505A\\u4E3B\\u8981\\u4F18\\u5316\\u624B\\u6BB5\\u7684\\u56E2\\u961F\\u8D8A\\u6765\\u8D8A\\u5C11\\u4E86\\uFF0C\\u6CA1\\u5FC5\\u8981\\u82B1\\u592A\\u591A\\u7CBE\\u529B\\u6263\\u4E00\\u4E2A\\u590D\\u6742\\u7684\\u5B9E\\u73B0\\u3002\"), mdx(\"h4\", null, \"\\u4F9D\\u8D56\\u56FE\"), mdx(\"p\", null, \"\\u4E0D\\u540C\\u53EB\\u6CD5\\u5427\\uFF0C\\u6709\\u4E9B\\u53EB ModuleGraph\\u3001ModuleMap \\u7B49\\u7B49\\uFF0C\\u8FD9\\u79CD\\u4E4B\\u524D\\u5927\\u5382\\u6BD4\\u8F83\\u559C\\u6B22\\u7684\\u65B9\\u6848\\uFF0C\\u4E5F\\u57FA\\u672C\\u4E0A\\u5185\\u90E8\\u5DE5\\u5177\\u90FD\\u6709\\u5404\\u81EA\\u7684\\u5B9E\\u73B0\\uFF0C\\u5177\\u4F53\\u6838\\u5FC3\\u7684\\u65B9\\u6CD5\\u4E5F\\u662F\\u7EC6\\u5316\\u4F9D\\u8D56\\u5173\\u7CFB\\uFF0C\\u8FD0\\u884C\\u65F6\\u6309\\u9700\\u52A0\\u8F7D\\u3002\"), mdx(\"p\", null, \"\\u5904\\u7406\\u65B9\\u6CD5\\u57FA\\u672C\\u4E0A\\u5C31\\u662F\\u5C06\\u4E0D\\u540C\\u7684\\u6A21\\u5757\\u63D0\\u524D\\u6253\\u5305\\uFF0C\\u7136\\u540E\\u751F\\u6210\\u4E00\\u4EFD json \\u6216\\u8005\\u4EC0\\u4E48\\u683C\\u5F0F\\u7684\\u4F9D\\u8D56\\u5173\\u7CFB\\u56FE\\uFF0C\\u5728\\u52A0\\u8F7D\\u4E3B\\u5E94\\u7528\\u4E4B\\u524D\\uFF0C\\u5148\\u6839\\u636E\\u9700\\u8981\\u7684\\u4F9D\\u8D56\\uFF0C\\u53BB\\u52A0\\u8F7D\\u63D0\\u524D\\u6253\\u5305\\u597D\\u7684\\u6A21\\u5757\\uFF0C\\u52A0\\u8F7D\\u5B8C\\u6BD5\\u4E4B\\u540E\\u518D\\u8FD0\\u884C\\u4E3B\\u5E94\\u7528\\u7684\\u903B\\u8F91\\uFF0C\\u6216\\u8005\\u5E72\\u8106\\u90FD\\u5C06\\u5916\\u90E8\\u4F9D\\u8D56\\u505A\\u6210\\u5F02\\u6B65\\u5BFC\\u5165\\uFF0C\\u8FDE\\u4F9D\\u8D56\\u5173\\u7CFB\\u90FD\\u51E0\\u4E4E\\u4E0D\\u7528\\u5206\\u6790\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u4E5F\\u6709\\u7684\\u662F\\u53EA\\u751F\\u6210\\u4F9D\\u8D56\\u5173\\u7CFB\\u56FE\\uFF0C\\u7136\\u540E\\u6839\\u636E\\u4E0D\\u540C\\u7684\\u7F16\\u8BD1\\u76EE\\u6807\\uFF0C\\u518D\\u505A tree-shaking \\u548C bundle\\uFF0C\\u80FD\\u6709\\u66F4\\u597D\\u7684\\u9002\\u914D\\u7075\\u6D3B\\u6027\\uFF0C\\u751A\\u81F3\\u53EF\\u4EE5\\u4E0A\\u751F\\u4EA7\\u73AF\\u5883\\u3002\"), mdx(\"p\", null, \"\\u6A21\\u5757\\u7684\\u5F15\\u5165\\u4E5F\\u57FA\\u672C\\u4E0A\\u662F hack/hook \\u8FDB webpack_require\\uFF0C\\u66FF\\u6362\\u6216\\u8005\\u62FC\\u63A5\\u5404\\u4E2A\\u4F9D\\u8D56\\u7684 chunk\\u3002\"), mdx(\"p\", null, \"\\u5176\\u5B9E\\u8FD9\\u79CD\\u5B9E\\u73B0\\u65B9\\u6848\\u548C webpack 5 \\u7684 Module Federation \\u611F\\u89C9\\u539F\\u7406\\u662F\\u4E00\\u4E2A\\u610F\\u601D\\uFF0C\\u53EA\\u662F Module Federation \\u7684\\u65B9\\u6848\\u66F4\\u52A0\\u66F4\\u7B26\\u5408\\u5B98\\u65B9\\u7684 runtime\\u3002\"), mdx(\"h3\", null, \"2.2 \\u793E\\u533A\\u5DE5\\u5177\\u7684\\u63A2\\u7D22\"), mdx(\"p\", null, \"\\u76EE\\u524D\\u6709\\u5F88\\u591A\\u7684\\u6253\\u5305\\u5DE5\\u5177\\u63D0\\u51FA\\u4E86\\u4F9D\\u8D56\\u9884\\u7F16\\u8BD1\\u7684\\u65B9\\u6848\\uFF0C\\u5305\\u62EC\\u4E92\\u8054\\u7F51\\u5927\\u5382\\u7B49\\u4E5F\\u5728\\u4F9D\\u8D56\\u9884\\u7F16\\u8BD1\\u4E0A\\u5F00\\u59CB\\u7422\\u78E8\\u4E86\\uFF0C\\u90FD\\u662F\\u7B97\\u662F\\u9010\\u6E10\\u81A8\\u80C0\\u7684\\u4E1A\\u52A1\\u7F16\\u8BD1\\u65F6\\u95F4\\u7684\\u6781\\u81F4\\u4F18\\u5316\\u5427\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"vite\"), \" \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://cn.vitejs.dev/guide/dep-pre-bundling.html\"\n }, \"https://cn.vitejs.dev/guide/dep-pre-bundling.html\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"mfsu\"), \" \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://umijs.org/zh-CN/docs/mfsu\"\n }, \"https://umijs.org/zh-CN/docs/mfsu\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"taro\"), \" \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/NervJS/taro/discussions/11533\"\n }, \"https://github.com/NervJS/taro/discussions/11533\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Lynx\"), \" \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://zhuanlan.zhihu.com/p/357607473\"\n }, \"\\u57FA\\u4E8E esbuild \\u7684 universal bundler \\u8BBE\\u8BA1 - \\u77E5\\u4E4E (zhihu.com)\"), \" esbuild \\u7684 universal bundler \\u8BBE\\u8BA1\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"ICE \\u4F9D\\u8D56\\u6253\\u5305 \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.aliyun.com/article/783473\"\n }, \"\\u9762\\u5BF9 ESM \\u7684\\u5F00\\u53D1\\u6A21\\u5F0F\\uFF0Cwebpack \\u8FD8\\u6709\\u8FD8\\u624B\\u4E4B\\u529B\\u5417\\uFF1F-\\u963F\\u91CC\\u4E91\\u5F00\\u53D1\\u8005\\u793E\\u533A (aliyun.com)\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"http://www.alloyteam.com/2020/04/14338/\"\n }, \"\\u63A2\\u7D22 webpack5 \\u65B0\\u7279\\u6027 Module federation \\u5728\\u817E\\u8BAF\\u6587\\u6863\\u7684\\u5E94\\u7528 | AlloyTeam\"))), mdx(\"p\", null, \"\\u6240\\u4EE5\\u817E\\u8BAF\\u3001\\u963F\\u91CC\\u3001\\u5B57\\u8282\\u3001\\u4EAC\\u4E1C\\u7B49\\u4E92\\u8054\\u7F51\\u5927\\u5382\\u90FD\\u5728\\u8FD9\\u4E2A\\u65B9\\u5411\\u4E0A\\u8FDB\\u884C\\u4E86\\u63A2\\u7D22\\u5E76\\u6709\\u4EA7\\u51FA\\u3002\"), mdx(\"p\", null, \"\\u4F60\\u53EF\\u4EE5\\u5728\\u8FD9\\u4E2A\\u4ED3\\u5E93\\u4E2D\\u770B\\u5230\\u5404\\u4E2A\\u5927\\u5382\\u7684\\u76F8\\u5173\\u5E94\\u7528\\uFF1A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/module-federation/module-federation-examples\"\n }, \"\\u6A21\\u5757-\\u8054\\u5408/\\u6A21\\u5757-\\u8054\\u5408-\\u793A\\u4F8B\\uFF1A\\u6A21\\u5757\\u8054\\u5408\\u7684\\u5B9E\\u73B0\\u793A\\u4F8B\\uFF0C\\u7531\\u6A21\\u5757\\u8054\\u5408\\u7684\\u521B\\u5EFA\\u8005\\u63D0\\u4F9B (github.com)\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u5B9E\\u73B0\\u65B9\\u6848\\u7684\\u6E90\\u7801\\uFF1A\")), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"vite\"), \" \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/vitejs/vite/blob/main/packages/vite/src/node/optimizer/registerMissing.ts\"\n }, \"https://github.com/vitejs/vite/blob/main/packages/vite/src/node/optimizer/registerMissing.ts\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"umi.js\"), \" \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/umijs/umi-next/blob/master/packages/mfsu/src/mfsu.ts\"\n }, \"umi-next/mfsu.ts at master \\xB7 umijs/umi-next (github.com)\")), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"taro\"), \" \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/NervJS/taro/blob/feat%2Fwebpack5/packages/taro-webpack5-runner/src/prebundle/index.ts\"\n }, \"https://github.com/NervJS/taro/blob/feat%2Fwebpack5/packages/taro-webpack5-runner/src/prebundle/index.ts\"))), mdx(\"p\", null, \"\\u867D\\u7136\\u5404\\u81EA\\u7684\\u5B9E\\u73B0\\u4E0D\\u540C\\uFF0C\\u4F46\\u662F webpack \\u8FD9\\u8FB9\\u90FD\\u662F\\u4F7F\\u7528 Module Federation \\u7684\\u52A0\\u8F7D\\u65B9\\u6848\\u505A\\u7684\\uFF0C\\u800C\\u4E14\\u6839\\u636E\\u4ED6\\u4EEC\\u7684\\u7ED3\\u8BBA\\uFF0C\\u8FD9\\u79CD\\u9884\\u6253\\u5305\\u7684\\u65B9\\u6848\\u5BF9\\u4E8E\\u7F16\\u8BD1\\u7684\\u63D0\\u5347\\u662F\\u975E\\u5E38\\u5938\\u5F20\\u7684\\uFF0C\\u751A\\u81F3\\u4E00\\u5206\\u591A\\u949F\\u80FD\\u4F18\\u5316\\u5230 1s\\u4EE5\\u5185\\u3002\"), mdx(\"p\", null, \"\\u4E0D\\u8FC7\\u770B\\u4ED6\\u4EEC\\u7684\\u6E90\\u7801\\uFF0C\\u867D\\u7136\\u65B9\\u6848\\u72EC\\u7ACB\\uFF0C\\u4F46\\u662F\\u4ECD\\u7136\\u6709\\u975E\\u5E38\\u591A\\u7684\\u6846\\u67B6\\u98CE\\u683C\\u548C\\u975E\\u6838\\u5FC3\\u4EE3\\u7801\\uFF0C\\u5C01\\u88C5\\u7684\\u592A\\u201C\\u9AD8\\u7EA7\\u201D\\uFF0C\\u76F4\\u63A5\\u62FF\\u6765\\u7528\\u6211\\u4E5F\\u662F\\u4E00\\u8138\\u61F5\\uFF0C\\u4E0D\\u5982\\u81EA\\u5DF1\\u634B\\u4E00\\u4E0B\\u6D88\\u5316\\u6D88\\u5316\\uFF0C\\u540E\\u671F\\u7528\\u5230\\u4E1A\\u52A1\\u4E2D\\u3002\\u672C\\u6587\\u5B9E\\u9645\\u7FFB\\u770B\\u5E76\\u53C2\\u8003\\u4E86\\u4ED6\\u4EEC\\u975E\\u5E38\\u591A\\u7684\\u5B9E\\u73B0\\u601D\\u8DEF\\u548C\\u6280\\u5DE7\\uFF0C\\u4E0D\\u8FC7\\u56E0\\u4E3A\\u6700\\u540E\\u6211\\u7684\\u5B9E\\u73B0\\u6BD4\\u8F83\\u4F20\\u7EDF\\uFF0C\\u518D\\u52A0\\u4E0A\\u7BC7\\u5E45\\u6709\\u9650\\u4E5F\\u5C31\\u4E0D\\u4E00\\u4E00\\u5BF9\\u6BD4\\u8D34\\u51FA\\u6765\\u4E86\\u3002\"), mdx(\"h3\", null, \"2.3 \\u5173\\u952E\\u6D41\\u7A0B\"), mdx(\"p\", null, \"\\u4E3B\\u8981\\u601D\\u60F3\\u90FD\\u662F\\u5206\\u6790\\u4F9D\\u8D56\\u5173\\u7CFB\\uFF0C\\u6839\\u636E\\u4F9D\\u8D56\\u5F15\\u5165\\u6765\\u63D0\\u524D\\u6253\\u5305\\uFF0C\\u6700\\u540E\\u901A\\u8FC7\\u52A0\\u8F7D\\u6216\\u8005\\u6A21\\u5757\\u8054\\u90A6\\u6765\\u65E0\\u611F\\u4EE3\\u66FF\\u7528\\u6237\\u7684\\u5F15\\u5165\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6536\\u96C6\\u5BF9 node_modules \\u7684\\u5F15\\u7528\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5206\\u6790\\u4F9D\\u8D56\\u5173\\u7CFB\\uFF0C\\u4EE5\\u4FBF\\u5904\\u7406\\u4E92\\u76F8\\u4F9D\\u8D56\\u95EE\\u9898\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6253\\u5305\\u4F9D\\u8D56: \\u5C06\\u4F9D\\u8D56\\u6253\\u5305\\u6210 bundle\\uFF08ESM/Commonjs\\uFF09\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u901A\\u8FC7\\u5404\\u81EA\\u7684\\u6A21\\u5757\\u5F15\\u5165\\u65B9\\u6848\\u88AB import\")), mdx(\"p\", null, \"\\u6240\\u4EE5\\u5173\\u952E\\u70B9\\u5728\\u4E8E\\u600E\\u4E48\\u6253\\u5305\\uFF0C\\u4EE5\\u53CA\\u6253\\u5305\\u597D\\u7684 bundle \\u600E\\u4E48\\u88AB\\u5F15\\u5165\\uFF0C\\u8FD9\\u4E24\\u70B9\\u7684\\u5B9E\\u73B0\\u5176\\u5B9E\\u65B9\\u6CD5\\u633A\\u5F00\\u653E\\u7684\\u3002\"), mdx(\"h4\", null, \"1. \\u6253\\u5305\\u65B9\\u6CD5\"), mdx(\"p\", null, \"webpack\\u3001esbuild\\u3001Rollup\\u3001SnowPack\\u7B49\\uFF0C\\u53EA\\u8981\\u80FD\\u6253\\u5305\\u51FA esm \\u6216\\u8005 commonjs \\u6807\\u51C6\\u7684\\u5305\\u5C31\\u884C\\uFF0C\\u6211\\u4EEC\\u5982\\u679C\\u4EC5\\u9488\\u5BF9\\u5F00\\u53D1\\u73AF\\u5883\\u7684\\u6D4F\\u89C8\\u5668\\uFF0C\\u90A3\\u4E48\\u53EA\\u8981\\u76F4\\u63A5\\u80FD\\u591F\\u88AB\\u5F15\\u7528\\u5373\\u53EF\\u3002\"), mdx(\"p\", null, \"\\u751A\\u81F3\\u5F88\\u591A\\u7684\\u7B2C\\u4E09\\u65B9\\u5E93\\u90FD\\u5728 dist \\u76EE\\u5F55\\u4E0B\\u63D0\\u4F9B\\u4E86\\u6253\\u5305\\u597D\\u7684 min.js \\u6216\\u8005 umd/esm \\u6807\\u51C6\\u7684\\u6587\\u4EF6\\uFF0C\\u514D\\u6253\\u5305\\u76F4\\u63A5\\u62FF\\u6765\\u7528\\u5373\\u53EF\\uFF0C\\u8FD8\\u6709\\u4E9B\\u7EBF\\u4E0A\\u7684 esm CDN \\u670D\\u52A1 esm.sh / skypack \\u7B49\\u3002\"), mdx(\"p\", null, \"\\u81F3\\u4E8E\\u672C\\u5730\\u73AF\\u5883\\u4E0B\\uFF0C\\u76EE\\u524D\\u793E\\u533A\\u66F4\\u591A\\u4F7F\\u7528 esbuild \\u6765\\u6253\\u5305\\uFF0C\\u6BD5\\u7ADF\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u7684\\u590D\\u6742\\u5EA6\\u53EF\\u63A7\\uFF0Cesbuild \\u5E94\\u8BE5\\u662F\\u76EE\\u524D\\u6700\\u597D\\u7684\\u9009\\u62E9\\uFF0C\\u7559\\u610F\\u4E00\\u4E0B\\u4E92\\u76F8\\u5F15\\u7528\\u95EE\\u9898\\u5373\\u53EF\\u3002\"), mdx(\"h4\", null, \"2. \\u5305\\u683C\\u5F0F\"), mdx(\"p\", null, \"\\u524D\\u7AEF\\u7684 bundle \\u53EF\\u4EE5\\u8BF4\\u771F\\u7684\\u662F\\u592A\\u96BE\\u4E86\\uFF0Ccjs\\u3001iife\\u3001esm\\uFF0C\\u751A\\u81F3\\u8FD8\\u6709 amd\\u3001umd\\u3001system.js \\u4E4B\\u7C7B\\u3002\\u603B\\u8981\\u786E\\u5B9A\\u4E00\\u4E2A\\u5427\\uFF0C\\u81F3\\u5C11\\u8BA9\\u5F15\\u5165 bundle \\u7684\\u5904\\u7406\\u4E0D\\u7528\\u5404\\u79CD\\u517C\\u5BB9\\u4E86\\u3002\"), mdx(\"p\", null, \"cjs \\u662F node \\u73AF\\u5883\\u4E0B\\u7684\\u5305\\uFF0C\\u867D\\u7136\\u5B9E\\u73B0\\u5BB9\\u6613\\uFF0C\\u517C\\u5BB9\\u4E5F\\u633A\\u597D\\uFF0C\\u4F46\\u662F\\u9700\\u8981 runtime \\u4E14 tree-shaking \\u6216\\u76F8\\u5173\\u7684\\u5206\\u6790\\u4F9D\\u8D56\\u4E0D\\u597D\\u505A\\u3002\\niife \\u5C31\\u662F\\u4F20\\u8BF4\\u4E2D\\u7684\\u95ED\\u5305\\uFF0C\\u8FD9\\u4E2A\\u5C01\\u88C5\\u5927\\u6982\\u7387\\u4F1A\\u51FA\\u73B0\\u91CD\\u590D\\u6267\\u884C\\u7684\\u95EE\\u9898\\u3002\\nesm \\u662F ES \\u89C4\\u8303\\u4E0B\\u7684\\u6807\\u51C6\\u6A21\\u5757\\uFF0C\\u4F46\\u662F\\u53EF\\u80FD\\u5B58\\u5728\\u5F02\\u6B65\\u903B\\u8F91\\uFF0C\\u4E0D\\u592A\\u7B26\\u5408 webpack \\u98CE\\u683C\\uFF0C\\u5BF9\\u5F00\\u53D1\\u4E5F\\u6709\\u5F71\\u54CD\"), mdx(\"p\", null, \"\\u4E0D\\u8FC7 webpack \\u6253\\u5305\\u4E5F\\u90FD\\u662F\\u4E0D\\u7528\\u592A\\u5173\\u5FC3\\uFF0C\\u800C\\u4E14\\u5F00\\u53D1\\u73AF\\u5883\\uFF0C\\u4E0D\\u592A\\u62C5\\u5FC3\\u7F3A\\u70B9\\uFF0C\\u80FD\\u8DD1\\u5C31\\u884C\\uFF0C\\u4F18\\u5148 esm\\uFF0C\\u5176\\u6B21 cjs\\u3002\"), mdx(\"h4\", null, \"3. \\u5F15\\u5165\\u65B9\\u6CD5\"), mdx(\"p\", null, \"\\u6253\\u5305\\u548C\\u5305\\u683C\\u5F0F\\u90FD\\u4E0D\\u662F\\u4EC0\\u4E48\\u5927\\u95EE\\u9898\\uFF0C\\u5DF2\\u7ECF\\u6709\\u5F88\\u591A\\u5B9E\\u8DF5\\u4E86\\uFF0C\\u600E\\u4E48\\u7528\\u5462\\uFF1F\\u6BD5\\u7ADF\\u4E1A\\u52A1\\u4EE3\\u7801\\u4E0D\\u518D\\u6253\\u5305\\u5230\\u4E00\\u8D77\\u4E86\\uFF0C\\u6240\\u4EE5 runtime \\u7684\\u52A0\\u8F7D\\u5668\\u5FC5\\u987B\\u8003\\u8651\\u5F02\\u6B65\\u52A0\\u8F7D\\u3001\\u5171\\u4EAB\\u6A21\\u5757\\u7B49\\u4E00\\u5806\\u524D\\u7F6E\\u5904\\u7406\\u3002\"), mdx(\"p\", null, \"\\u5F15\\u5165\\u65B9\\u6CD5\\u548C\\u6253\\u5305\\u7684\\u4EA7\\u7269\\u76F8\\u5173\\u6027\\u8F83\\u9AD8\\uFF0C\\u751A\\u81F3\\u5206\\u4E3A node \\u7AEF / browser\\u7AEF\\uFF0C\\u533A\\u5206cjs\\u3001esm\\u3001iife\\u751A\\u81F3 module graph \\u7684\\u4EA7\\u7269\\u3002\"), mdx(\"p\", null, \"\\u6253\\u5305\\u5DE5\\u5177\\u6216\\u8005\\u6D4F\\u89C8\\u5668\\u672C\\u8EAB\\u5BF9 esm \\u6216 commonjs \\u7684\\u652F\\u6301\\u90FD\\u633A\\u597D\\u7684\\u4E86\\uFF0C\\u5C24\\u5176\\u662F\\u5F00\\u53D1\\u73AF\\u5883\\u4E0B\\u66F4\\u5173\\u5FC3\\u901F\\u5EA6\\u800C\\u4E0D\\u662F\\u517C\\u5BB9\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u6BD4\\u5982\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"vite \\u4E4B\\u7C7B\\u7684 esm \\u5F00\\u53D1\\u5DE5\\u5177\\u76F4\\u63A5\\u4F7F\\u7528\\uFF0C\\u65E0\\u9700\\u4EC0\\u4E48\\u7279\\u522B\\u7684\\u5F15\\u5165\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6253\\u5305\\u51FA esm/commonjs \\u7136\\u540E inject \\u5230 html \\u4E2D\\uFF0C\\u6253\\u5305\\u65F6\\u8BBE\\u4E3A externals\\u3002\\u7B80\\u5355\\u7C97\\u66B4\\u4F46\\u6709\\u6548\\uFF0C\\u53EA\\u662F\\u8981\\u5904\\u7406\\u4E0D\\u540C\\u7684 entry\\uFF0C\\u540C\\u65F6\\u4E5F\\u6709\\u4F9D\\u8D56\\u548C\\u987A\\u5E8F\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6253\\u5305\\u4E4B\\u540E inject \\u5230 entry \\u4E2D\\uFF0C\\u9700\\u8981\\u8003\\u8651\\u987A\\u5E8F\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4F5C\\u4E3A alias \\u4EE3\\u66FF\\u4E4B\\u524D\\u7684\\u5F15\\u7528\\u3002\")), mdx(\"p\", null, \"\\u4EE5\\u4E0A\\u7684\\u65B9\\u6CD5\\u4EC0\\u4E48\\u7684\\u90FD\\u53EF\\u4EE5\\u7528\\uFF0C\\u624B\\u6413\\u4E00\\u4E2A\\u81EA\\u7136\\u4E5F\\u5C31\\u662F\\u8D39\\u4E9B\\u8111\\u7EC6\\u80DE\\uFF0C\\u524D\\u63D0\\u4E5F\\u90FD\\u662F\\u9700\\u8981\\u5904\\u7406\\u597D\\u590D\\u6742\\u7684\\u4F9D\\u8D56\\u5173\\u7CFB\\uFF0C\\u5F02\\u6B65\\u52A0\\u8F7D\\u903B\\u8F91\\u7B49\\u5FC5\\u8981\\u7684\\u9700\\u6C42\\u3002\"), mdx(\"p\", null, \"\\u6211\\u4EEC\\u9700\\u8981\\u4E1A\\u52A1\\u548C\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u6A21\\u5757\\u7684 exportMap \\u548C importMap\\uFF0C\\u9012\\u5F52\\u5904\\u7406\\u6240\\u6709\\u9700\\u8981\\u5F15\\u5165\\u7684\\u6587\\u4EF6\\uFF0C\\u7136\\u540E\\u6839\\u636E\\u4E0D\\u540C\\u7684\\u5305\\u683C\\u5F0F\\u5F15\\u5165\\u8FDB\\u6765\\uFF0C\\u7136\\u540E\\u6309\\u987A\\u5E8F\\u6267\\u884C\\u4E1A\\u52A1\\u903B\\u8F91\\u5C31\\u884C\\u3002\\u5173\\u952E\\u5C31\\u662F\\u8FD9\\u4E2A exportMap \\u548C importMap \\u7684\\u6536\\u96C6\\uFF0C\\u5728\\u5DE5\\u7A0B\\u5316\\u4E2D\\uFF0C\\u5728\\u4E0A\\u9762\\u7684\\u6253\\u5305\\u4E2D\\u6211\\u4EEC\\u4E5F\\u80FD\\u591F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"es_module_lexer\"), \" \\u4E4B\\u7C7B\\u7684\\u5DE5\\u5177\\u6536\\u96C6\\u8FD9\\u4E9B\\uFF0C\\u6700\\u540E\\u6211\\u4EEC\\u505A\\u4E00\\u4E2A\\u52A0\\u8F7D\\u5668\\u4E5F\\u5C31\\u884C\\u3002\"), mdx(\"p\", null, \"\\u4E0D\\u8FC7 webpack5 \\u5DF2\\u7ECF\\u5E2E\\u6211\\u4EEC\\u5B9E\\u73B0\\u4E86\\u4E00\\u4E2A\\u8DE8\\u6A21\\u5757\\u7684\\u5BFC\\u51FA\\u5BFC\\u5165\\u65B9\\u6848\\uFF1Awebpack Module Federation\\uFF0C\\u53EF\\u4EE5\\u4F5C\\u4E3A\\u6211\\u4EEC\\u7684\\u4F9D\\u8D56\\u89E3\\u51B3\\u65B9\\u6848\\u3002\\u5F53\\u7136\\uFF0C\\u4E5F\\u5E76\\u4E0D\\u662F\\u552F\\u4E00\\u7684\\u3002\"), mdx(\"h4\", null, \"4. Module Federation\"), mdx(\"p\", null, \"Module Federation \\u7684\\u6982\\u5FF5\\u548C\\u5B9E\\u73B0\\u90FD\\u5E76\\u4E0D\\u662F\\u5F88\\u65B0\\u7684\\u4E1C\\u897F\\uFF0C\\u53EA\\u4E0D\\u8FC7\\u662F webpack \\u5B98\\u65B9\\u65B9\\u6848\\uFF0C\\u6240\\u4EE5\\u6BD4\\u8F83\\u9002\\u5408 webpack \\u7684 runtime \\u548C\\u7F16\\u8BD1\\u903B\\u8F91\\uFF0C\\u8FD9\\u7BC7\\u6587\\u7AE0\\u4E5F\\u65E0\\u610F\\u505A\\u6E90\\u7801\\u7EA7\\u522B\\u7684\\u5206\\u6790\\uFF0C\\u8FD9\\u91CC\\u53EA\\u63A2\\u7D22\\u600E\\u4E48\\u7528\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u4E00\\u53E5\\u8BDD\\u5C31\\u662F\\uFF1A\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u7F16\\u8BD1\\u4EA7\\u7269 bundle \\u53EF\\u4EE5\\u4E92\\u76F8\\u52A0\\u8F7D\\u3001\\u4F9D\\u8D56\\u5171\\u4EAB\\u3001\\u8FDC\\u7AEF\\u514D\\u6784\\u5EFA\\u3001webpack \\u98CE\\u683C\")), mdx(\"p\", null, \"\\u63A8\\u8350\\u770B\\u4E0B\\u817E\\u8BAF\\u6587\\u6863\\u7684\\u65E9\\u671F\\u63A2\\u7D22 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"http://www.alloyteam.com/2020/04/14338/\"\n }, \"\\u63A2\\u7D22 webpack5 \\u65B0\\u7279\\u6027 Module federation \\u5728\\u817E\\u8BAF\\u6587\\u6863\\u7684\\u5E94\\u7528 | AlloyTeam\"), \"\\uFF0C\\u5F88\\u8BE6\\u5C3D\\u4E14\\u6709\\u53C2\\u8003\\u610F\\u4E49\\u3002\"), mdx(\"p\", null, \"\\u5173\\u952E\\u70B9\\u5728 \\u52A8\\u6001\\u52A0\\u8F7D\\u673A\\u5236\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"webpack \\u901A\\u8FC7 Module Federation \\u63D2\\u4EF6\\u673A\\u5236\\uFF0C\\u5C06 remote \\u66B4\\u9732\\u51FA\\u6765\\u7684\\u6A21\\u5757\\u751F\\u6210\\u4E86\\u4E00\\u4EFD\\u4F9D\\u8D56\\u56FE \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"moduleMap\"), \" \\u5230 remoteEntry \\u4E2D\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4E3B\\u5E94\\u7528\\u5165\\u53E3\\u6267\\u884C\\u7684\\u65F6\\u5019\\uFF0C\\u6839\\u636E\\u4F9D\\u8D56\\u94FE\\uFF0C\\u52A8\\u6001\\u52A0\\u8F7D\\u5404\\u4E2A\\u4F9D\\u8D56\\u6A21\\u5757\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"remoteEntry \\u88AB\\u5F15\\u5165\\u540E\\u53EF\\u4EE5\\u8BA9\\u52A8\\u6001\\u52A0\\u8F7D\\u5728 remote \\u7684\\u4F9D\\u8D56\\u4E2D\\u53BB\\u627E\\u54CD\\u5E94\\u7684\\u4F9D\\u8D56\\u4F7F\\u7528\\u5F02\\u6B65\\u52A0\\u8F7D\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4E5F\\u5C31\\u662F\\u53EA\\u8981\\u4E3B\\u5E94\\u7528\\u80FD\\u591F\\u901A\\u8FC7 runtime \\u5C06 remoteEntry \\u52A0\\u8F7D\\u8FDB\\u6765\\uFF0C\\u76F8\\u5173\\u7684\\u524D\\u7F6E\\u4F9D\\u8D56\\u548C\\u5404\\u4E2A chunk \\u5C31\\u80FD\\u591F\\u81EA\\u7136\\u88AB\\u5F15\\u5165\\uFF0C\\u4E0D\\u4F1A\\u591A\\u4E5F\\u4E0D\\u4F1A\\u5C11\\uFF0C\\u540E\\u9762\\u4E00\\u5207\\u4E5F\\u81EA\\u7136\\u90FD\\u80FD\\u8DD1\\u7684\\u8D77\\u6765\\u4E86\\u3002\")), mdx(\"p\", null, \"\\u8BF4\\u767D\\u4E86\\uFF0C\\u5F00\\u53D1\\u8005\\u5728 webpack \\u914D\\u7F6E\\u4E2D\\u5C06\\u9700\\u8981\\u5BFC\\u5165\\u5BFC\\u51FA\\u7684\\u914D\\u7F6E\\u5199\\uFF0Cwebpack \\u6839\\u636E\\u914D\\u7F6E\\u5C06\\u5404\\u4E2A\\u5BFC\\u51FA\\u6A21\\u5757\\u4F5C\\u4E3A entry \\u5355\\u72EC\\u5BFC\\u51FA\\uFF0C\\u5E76\\u751F\\u6210\\u4E00\\u4E2A remoteEntry \\u5305\\u542B\\u8FD9\\u4E2A moduleMap\\uFF0C\\u8FD9\\u6837\\u51C6\\u5907\\u597D\\u5B50\\u5E94\\u7528/\\u8FDC\\u7AEF\\u5E94\\u7528\\uFF0C\\u4E0D\\u5FC5\\u548C\\u4E3B\\u5E94\\u7528\\u4E00\\u8D77\\u6253\\u5305\\u4E86\\u3002\\u4E3B\\u5E94\\u7528\\u5728\\u914D\\u7F6E\\u4E86\\u5BFC\\u5165\\u7684\\u65F6\\u5019\\uFF0C\\u6839\\u636E\\u914D\\u7F6E\\u5F15\\u5165\\u8FDC\\u7AEF\\u7684 remoteEntry\\uFF0C\\u6839\\u636E moduleMap \\u6765\\u63D0\\u524D\\u5C06\\u4F9D\\u8D56\\u7684\\u8FDC\\u7AEF chunk \\u52A0\\u8F7D\\u597D\\uFF0C\\u540E\\u7EED\\u7684\\u4E3B\\u5E94\\u7528\\u81EA\\u7136\\u80FD\\u591F\\u65E0\\u611F\\u77E5\\u5F15\\u7528\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u5B98\\u65B9\\u4E5F\\u5728\\u6587\\u6863\\u4E2D\\u63D0\\u5230\\u4E86\\u5BF9\\u4E8E\\u7EC4\\u4EF6\\u5E93\\u7684\\u7528\\u4F8B\\uFF0C\\u53EA\\u4E0D\\u8FC7\\u662F\\u5F3A\\u8C03\\u53EF\\u4EE5\\u7EC4\\u4EF6\\u5E93\\u7684\\u4FEE\\u6539\\u5355\\u72EC\\u7F16\\u8BD1\\uFF0C\\u4E0D\\u9700\\u8981\\u91CD\\u65B0\\u6784\\u5EFA\\u4E3B\\u5E94\\u7528\\u3002\"), mdx(\"p\", null, \"\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u63D0\\u524D\\u6784\\u5EFA\\u7684\\u76EE\\u7684\\u548C Module Federation \\u90FD\\u662F\\u907F\\u514D\\u975E\\u5FC5\\u8981\\u7A0B\\u5E8F\\u7684\\u6784\\u5EFA\\uFF0C\\u53EA\\u4E0D\\u8FC7\\u5C06\\u76F8\\u5BF9\\u72EC\\u7ACB\\u7684\\u6A21\\u5757\\u3001\\u4E1A\\u52A1\\u3001\\u7EC4\\u4EF6\\u5E93\\u3001\\u5355\\u9875\\u7B49\\u5B98\\u65B9\\u573A\\u666F\\u6362\\u6210\\u4E86\\u5177\\u4F53\\u7684\\u67D0\\u4E00\\u4E2Anpm\\u4F9D\\u8D56\\u3002\"), mdx(\"h3\", null, \"2.4 webpack \\u4E0B\\u7684\\u5B9E\\u73B0\\u6B65\\u9AA4\"), mdx(\"p\", null, \"\\u6709\\u5F88\\u591A\\u79CD\\u5B9E\\u73B0\\u9014\\u5F84\\u548C\\u65B9\\u6CD5\\uFF0C\\u6211\\u8FD9\\u91CC\\u53C2\\u8003\\u4E86 umijs/mfsu \\u548C taro-prebundle \\u7684\\u5B9E\\u73B0\\uFF0C\\u4F46\\u662F\\u843D\\u5730\\u4EE3\\u7801\\u4E0D\\u540C\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u627E\\u5230 entry\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u626B\\u63CF\\u51FA\\u6240\\u6709\\u7684 node_modules \\u4F9D\\u8D56: scanImports\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u9488\\u5BF9\\u4E0D\\u540C\\u7684\\u5305\\u5F62\\u5F0F\\uFF0C\\u51C6\\u5907\\u5BF9\\u5E94\\u5171\\u4EAB\\u5165\\u53E3\\u6587\\u4EF6\\uFF0C\\u51C6\\u5907\\u597D remoteApp\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u65B0\\u8BBE\\u4E00\\u4E2A\\u4F9D\\u8D56\\u5305\\u7684 webpack \\u914D\\u7F6E\\uFF0C\\u8003\\u8651\\u4F9D\\u8D56\\u3001\\u5F15\\u7528\\u548C\\u914D\\u7F6E\\u76F8\\u5173\\u903B\\u8F91\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5C06 remoteApp \\u6253\\u5305\\u6210 Module Federation \\u683C\\u5F0F\\uFF0C\\u5F97\\u5230\\u9884\\u7F16\\u8BD1\\u683C\\u5F0F\\u7684 chunk \\u6587\\u4EF6\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4E3B\\u5E94\\u7528\\u4FEE\\u6539\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u7684\\u5F15\\u7528\\u65B9\\u6CD5\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4E3B\\u5E94\\u7528webpack \\u914D\\u7F6E\\u8C03\\u6574\\u6DFB\\u52A0 Module Federation \\u76F8\\u5173\\uFF0C\\u8BBE\\u7F6E remotes \\u5F15\\u5165\\u65B9\\u5F0F\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4E3B\\u5E94\\u7528\\u5165\\u53E3\\u6587\\u4EF6\\u8986\\u76D6\\u6539\\u52A8\")), mdx(\"p\", null, \"\\u5BF9 node_modules \\u4F9D\\u8D56\\u7684\\u6253\\u5305\\u4E0D\\u4E00\\u5B9A\\u8981\\u7528 esbuild\\uFF0C\\u4EFB\\u610F\\u7684\\u6253\\u5305\\u5DE5\\u5177\\u90FD\\u53EF\\u4EE5\\uFF0Cumi\\u7528\\u7684\\u662F babel\\uFF0Ctaro \\u53C2\\u8003 vite \\u7528\\u7684\\u90FD\\u662F esbuild\\u3002esbuild \\u901F\\u5EA6\\u5FEB\\uFF0C\\u4F46 babel \\u7684 runtime \\u6BD4\\u8F83\\u5F00\\u653E\\uFF0C\\u66F4\\u65B9\\u4FBF\\u4ECB\\u5165\\u7F16\\u8BD1\\u8FC7\\u7A0B\\u3002\"), mdx(\"p\", null, \"umi\\u3001taro \\u8FD8\\u6709 vite \\u7684\\u5B9E\\u73B0\\uFF0C\\u867D\\u7136\\u90FD\\u8BF4\\u53EF\\u4EE5\\u5355\\u72EC\\u4F7F\\u7528\\uFF0C\\u4F46\\u662F\\u6E90\\u7801\\u91CC\\u9762\\u4E0E\\u6846\\u67B6\\u7684\\u8026\\u5408\\u8FD8\\u662F\\u6BD4\\u8F83\\u5927\\uFF0C\\u540C\\u65F6\\u56E0\\u4E3A\\u8003\\u8651\\u592A\\u591A\\u5F02\\u5E38\\u548C\\u8FB9\\u754C\\uFF0C\\u6CA1\\u6709\\u90A3\\u4E48\\u4E00\\u76EE\\u4E86\\u7136\\u3002\\u6240\\u4EE5\\u4E0B\\u9762\\u7B80\\u5355\\u8BF4\\u4E0B\\u6211\\u600E\\u4E48\\u505A\\u7684\\u3002\\u65B9\\u6848\\u76F8\\u6BD4\\u4ED6\\u4EEC\\u66F4\\u7B80\\u5355\\u7C97\\u66B4\\uFF0C\\u4E0D\\u8FC7\\u8FD8\\u662F\\u80FD\\u7528\\u7684\\u3002\"), mdx(\"p\", null, \"\\u4EE5\\u4E0B\\u4EE3\\u7801\\u5927\\u591A\\u53EA\\u80FD\\u63D0\\u4F9B\\u601D\\u8DEF\\uFF0C\\u800C\\u4E14\\u6BCF\\u4E2A\\u4EBA\\u7684\\u914D\\u7F6E\\u9879\\u4E0D\\u540C\\uFF0C\\u9700\\u6C42\\u4E0D\\u540C\\uFF0C\\u5177\\u4F53\\u5B9E\\u73B0\\u8BF7\\u81EA\\u5DF1\\u8C03\\u8BD5\\uFF1A\"), mdx(\"h4\", null, \"1. entry \\u7684\\u6536\\u96C6\"), mdx(\"p\", null, \"\\u8FD9\\u4E00\\u6B65\\u5F88\\u7B80\\u5355\\uFF0C\\u6BD5\\u7ADF webpack \\u7684\\u6253\\u5305\\u4E5F\\u662F\\u9700\\u8981\\u7684\\uFF0C\\u9879\\u76EE\\u4E2D\\u662F\\u591A\\u9875\\u9762\\u7684\\u5E94\\u7528\\uFF0C\\u6240\\u4EE5\\u6709\\u5355\\u72EC\\u7684\\u5165\\u53E3\\u6536\\u96C6\\u65B9\\u6CD5\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"// \\u51B3\\u5B9A\\u4E86\\u7F16\\u8BD1\\u548C\\u6536\\u96C6\\u5668\\u4ECE\\u54EA\\u5F00\\u59CB\\nconst entries = paths.appIndexJs.map((p) => p.path);\\nconst appPath = paths.appPath;\\n\")), mdx(\"h4\", null, \"2. \\u626B\\u63CF\\u4F9D\\u8D56\"), mdx(\"p\", null, \"esbuild \\u5B9E\\u73B0\\u8FD9\\u4E2A\\u4F1A\\u975E\\u5E38\\u5FEB\\uFF0ConResolve \\u7684\\u5404\\u79CD\\u5904\\u7406\\u5F88\\u65B9\\u4FBF\\uFF0C\\u5FEB\\u901F\\u8DD1\\u4E00\\u904D\\u5C31\\u884C\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6536\\u96C6\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u7684\\u540D\\u79F0\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6839\\u636E\\u540D\\u79F0\\u83B7\\u5F97\\u4E00\\u4E2A\\u89C4\\u8303\\u540D\\uFF0C\\u65B9\\u4FBF\\u540E\\u7EED\\u6587\\u4EF6\\u751F\\u6210\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"resolve \\u51FA\\u76EE\\u6807\\u5165\\u53E3\\u6587\\u4EF6\\uFF0C\\u65B9\\u4FBF\\u540E\\u7EED\\u5206\\u6790\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u83B7\\u53D6\\u5305\\u683C\\u5F0F\")), mdx(\"p\", null, \"\\u4E3B\\u8981\\u7684\\u6587\\u4EF6\\u5206\\u4E09\\u7C7B\\uFF1A\\u8DF3\\u8FC7\\u7EAF\\u8D44\\u6E90\\u7C7B\\uFF0C\\u6536\\u96C6\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\uFF0C\\u9012\\u5F52\\u975E\\u7B2C\\u4E09\\u65B9\\u7684\\u9879\\u76EE\\u6587\\u4EF6\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"await Promise.all(entries.map(entry => esbuild.build({\\n absWorkingDir: appPath,\\n entryPoints: [entry],\\n bundle: true,\\n write: false, // \\u53EA\\u662F\\u5206\\u6790\\u5F15\\u7528\\u5173\\u7CFB\\uFF0C\\u4E0D\\u9700\\u8981\\u771F\\u7684\\u5199\\u5165\\u78C1\\u76D8\\n format: 'esm',\\n plugins: [ scanImportsPlugin ]\\n})));\\n\\nconst scanImportsPlugin = {\\n name: 'scanImports',\\n setup(build) {\\n // \\u786E\\u8BA4\\u4E0D\\u9700\\u8981\\u5904\\u7406\\u7684\\u5F15\\u7528\\uFF0C\\u76F4\\u63A5\\u6807\\u8BB0\\u5916\\u90E8\\u6A21\\u5757\\u8DF3\\u8FC7\\n\\xA0 \\xA0 \\xA0 build.onResolve(({ filter: new RegExp(`\\\\\\\\.(${[/*[\\u975Ejsx?tsx?\\u4E4B\\u7C7B]\\u7B49\\u7B49*/].join('|')})$`) }), utils.externalModule); \\n\\n\\xA0 \\xA0 \\xA0 // \\u7EAF\\u7CB9\\u7684\\u7B2C\\u4E09\\u65B9\\u5F15\\u7528\\uFF0C\\u4EE5\\u5B57\\u6BCD\\u6216\\u8005@\\u5F00\\u5934\\uFF0C\\u4E0D\\u5305\\u542B https://\\u7C7B\\uFF0C\\u4E0D\\u5E26\\u6587\\u4EF6\\u524D\\u7F00\\uFF0C\\u4E0D\\u5E26[http,ftp,E:]://\\u7C7B\\u7684\\u8D44\\u6E90\\u8D44\\u6E90\\n build.onResolve({ filter: /^[\\\\w@][^:]/ }, async ({ path: id, importer }) => {\\n // \\u5DF2\\u7ECF\\u6536\\u96C6\\u7684\\u4F9D\\u8D56\\u76F4\\u63A5\\u8DF3\\u8FC7\\n if (deps.has(id)) return { path: id, external: true };\\n\\n const resolvedPath = await resolve(path.dirname(importer), id);\\n if (resolvedPath.includes('node_modules')) {\\n // \\u8FD9\\u662F\\u6211\\u4EEC\\u6700\\u4E3B\\u8981\\u5173\\u5FC3\\u7684\\u5730\\u65B9: \\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\n if (/\\\\.[jt]sx?$/.test(resolvedPath)) {\\n\\n // \\u7528 es-module-lexer\\uFF08\\u5FEB\\u901F\\u8BCD\\u6CD5\\u5206\\u6790\\u5E93\\uFF09 \\u68C0\\u67E5 ES \\u7684 exports \\u8BED\\u6CD5\\n // \\u4F46\\u662F \\\"export * from\\\" \\u8BED\\u6CD5\\u8FD8\\u662F\\u9700\\u8981\\u5355\\u72EC\\u68C0\\u67E5\\uFF0C\\u540E\\u7EED\\u6709\\u7528\\n let fileContent = await fs.promises.readFile(resolvedPath, 'utf8')\\n // \\u83B7\\u53D6 es \\u5BFC\\u51FA\\u4FE1\\u606F\\uFF0C\\u540E\\u7EED\\u7528\\u6765\\u5224\\u5B9A\\u662F\\u4E0D\\u662F ems\\uFF0C\\u4EE5\\u53CA\\u6253\\u5305\\u7684\\u63D0\\u53D6\\u65B9\\u6CD5\\n const exportsData = es_module_lexer.parse(fileContent);\\n let hasReExports = false;\\n\\n for (const { ss, se } of exportsData[0]) {\\n const exp = fileContent.slice(ss, se);\\n if (/export\\\\s+\\\\*\\\\s+from/.test(exp)) {\\n hasReExports = true;\\n }\\n }\\n\\n const hash = utils.getPkgHash(id, resolvedPath);\\n // flatten id: \\u5C06id\\u4E2D\\u7684\\u659C\\u6760\\u66FF\\u6362\\u6210\\u4E0B\\u5212\\u7EBF\\n // \\u540C\\u65F6\\u4E5F\\u52A0\\u5165\\u7F13\\u5B58 hash\\n const flat = utils.flattenId(id);\\n const flatId = flat + '_' + hash;\\n\\n const moduleMeta = {\\n imports: exportsData.imports || [],\\n exports: exportsData.exports || [],\\n facade: exportsData.facade || false,\\n hasReExports: hasReExports,\\n }\\n\\n let js = '';\\n\\n const importsList = moduleMeta.imports;\\n const exportsList = moduleMeta.exports;\\n\\n // \\u6839\\u636E exportsData \\u5224\\u65AD\\u662F ES \\u8FD8\\u662F CommonJS \\u7684\\u6A21\\u5757\\n\\n if (!importsList.length && !exportsList.length) {\\n /** CommonJS */\\n // console.log('rawId cjs -: ', rawId)\\n moduleMeta.needInterop = true;\\n js = `module.exports = require(\\\"${id}\\\")`;\\n } else {\\n /** ESM */\\n if (exportsList.includes('default')) {\\n // export default\\n js += `import d from \\\"${id}\\\";export default d;`;\\n }\\n if (hasReExports ||\\n exportsList.length > 1 ||\\n exportsList[0] !== 'default') {\\n // console.log('rawId esm *: ', rawId)\\n // export * from 'xx'\\n // export const xx\\n js += `export * from \\\"${id}\\\";`;\\n } else {\\n // console.log('rawId esm $: ', rawId)\\n }\\n }\\n\\n deps.set(id, {\\n id,\\n flatId,\\n exposeCode: js,\\n });\\n\\n }\\n // \\u6536\\u96C6\\u8FC7\\u540E\\u76F4\\u63A5\\u8DF3\\u8FC7\\uFF0C\\u4E0D\\u8003\\u8651\\u4F9D\\u8D56\\u7684\\u4F9D\\u8D56\\n return { path: id, external: true };\\n } else if (constant.assetsRE.test(resolvedPath)) {\\n return { path: id, external: true };\\n } else return { path: resolvedPath };\\n });\\n // catch all \\u515C\\u5E95\\u7684\\u5F15\\u5165\\n build.onResolve({ filter: /.*/ }, async ({ path: id, importer }) => {\\n const resolvedPath = await resolve(path.dirname(importer), id);\\n return { path: resolvedPath };\\n });\\n }\\n}\\n\")), mdx(\"p\", null, \"\\u6700\\u7EC8\\u4EA7\\u7269\\u5F97\\u5230\\u4E00\\u4E2A\\u4F9D\\u8D56\\u5217\\u8868\\uFF0C\\u5305\\u542B\\u7740\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u7684\\u540D\\u79F0\\u3001\\u6587\\u4EF6hash\\u3001\\u91CD\\u65B0\\u5BFC\\u51FA\\u7684\\u5F15\\u7528\\u6587\\u4EF6\\uFF0C\\u4EE5\\u4FBF\\u540E\\u7EED\\u903B\\u8F91\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"deps = [\\n {\\n id: 'dayjs',\\n flatId: 'dayjs_a1fc7db8',\\n exposeCode: 'module.exports = require(\\\"dayjs\\\")',\\n },\\n // ...\\n]\\n\")), mdx(\"h4\", null, \"3. \\u751F\\u6210\\u5171\\u4EAB\\u5165\\u53E3\"), mdx(\"p\", null, \"webpack Module Federation \\u7684 webpack \\u914D\\u7F6E\\u4E2D\\u9700\\u8981\\u4E00\\u4E2A expose \\u7684\\u5B57\\u6BB5\\uFF0C\\u91CC\\u9762\\u9700\\u8981\\u5305\\u542B\\u4F60\\u60F3\\u628A\\u54EA\\u4E9B\\u7EC4\\u4EF6\\u66B4\\u9732\\u51FA\\u53BB\\uFF0C\\u8FD9\\u4E2A\\u6587\\u4EF6\\u6211\\u4EEC\\u9700\\u8981\\u751F\\u6210\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"flattenDeps.forEach(dep => {\\n const exposePath = path.join(bundlesDir, dep.flatId + '.expose.js')\\n if(!fs.existsSync(exposePath)) {\\n fs.writeFileSync(exposePath, dep.exposeCode)\\n }\\n})\\n\")), mdx(\"p\", null, \"\\u660E\\u767D Module Federation \\u65B9\\u6848\\u67B6\\u6784\\u7684\\u5E94\\u8BE5\\u610F\\u8BC6\\u5230\\u4E86\\uFF0C\\u8FD9\\u6837\\u6211\\u4EEC\\u76F8\\u5F53\\u4E8E\\u51C6\\u5907\\u4E86\\u4E00\\u4E2A\\u65B0\\u7684 webpack \\u9879\\u76EE\\uFF0C\\u91CC\\u9762\\u5305\\u542B\\u4E86\\u4E00\\u5806\\u6A21\\u5757\\uFF0C\\u6BCF\\u4E2A\\u6A21\\u5757\\u5B9E\\u9645\\u4E0A\\u90FD\\u662F\\u76F4\\u63A5\\u5F15\\u7528\\u5E76\\u6839\\u636E esm \\u6216 commonJS \\u89C4\\u8303\\u5BFC\\u51FA\\u7684\\u7B2C\\u4E09\\u65B9\\u6A21\\u5757\\u3002\\u4E3A\\u6211\\u4EEC\\u4E0B\\u4E00\\u6B65\\u7684\\u5DE5\\u4F5C\\u505A\\u597D\\u4E86\\u51C6\\u5907\\u3002\"), mdx(\"p\", null, \"\\u4E4B\\u524D\\u82B1\\u4E86\\u975E\\u5E38\\u591A\\u5FC3\\u601D\\u8BBE\\u8BA1\\u4E86\\u4E00\\u4E2A esbuild \\u5148 bundle \\u5316\\u4E4B\\u540E\\u518D expose \\u51FA\\u53BB\\u7684\\u65B9\\u6848\\uFF0C\\u4F1A\\u51FA\\u73B0\\u5171\\u4EAB\\u4F9D\\u8D56\\u91CD\\u590D\\u6253\\u5305\\uFF0C\\u8FD8\\u6709\\u591A\\u5B9E\\u4F8B\\u7684\\u95EE\\u9898\\uFF0C\\u6240\\u4EE5\\u6211\\u4EEC\\u8FD9\\u91CC\\u7B80\\u5355\\u5904\\u7406\\u66F4\\u6709\\u6548\\uFF0C\\u8BA9 webpack \\u540E\\u8FB9\\u5E2E\\u6211\\u4EEC\\u5904\\u7406\\u5171\\u4EAB\\u4F9D\\u8D56\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u6700\\u7EC8\\u4EA7\\u7269\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"./react_60f57521.expose.js\\n./react-dom_ee488318.expose.js\\n./dayjs_a1fc7db8.expose.js\\n\")), mdx(\"h4\", null, \"4. Remote App \\u5B9E\\u9645\\u6253\\u5305\"), mdx(\"p\", null, \"\\u4E0A\\u4E00\\u6B65\\u6211\\u4EEC\\u51C6\\u5907\\u597D\\u4E86\\u8FD9\\u4E2A\\u7A7A\\u58F3\\u7684 remoteApp\\uFF0C\\u8FD9\\u91CC\\u6211\\u4EEC\\u5F00\\u59CB\\u6253\\u5305\\u51FA\\u7B26\\u5408 Module Federation \\u7684\\u903B\\u8F91\\u4EA7\\u7269\\uFF0C\\u4E5F\\u5C31\\u662F remote-chunk \\u6587\\u4EF6\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u521B\\u5EFA\\u4E00\\u4E2A\\u65B0\\u7684 webpack \\u914D\\u7F6E\\u6587\\u4EF6\\uFF0C\\u53EA\\u5305\\u542B\\u8F93\\u5165\\u8F93\\u51FA\\uFF0C\\u8F93\\u5165\\u4E0D\\u91CD\\u8981\\uFF0C\\u7A7A\\u6587\\u4EF6\\u5373\\u53EF\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5C06\\u6240\\u6709\\u4E0A\\u9762\\u751F\\u6210\\u7684\\u5171\\u4EAB\\u4F9D\\u8D56\\u7684\\u5165\\u53E3\\u4F5C\\u4E3A\\u914D\\u7F6E exposes \\u53C2\\u6570\\u5373\\u53EF\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u901A\\u8FC7\\u4E00\\u4E2A\\u72EC\\u7ACB\\u7684 loader \\u5C06\\u6253\\u5305\\u8FC7\\u7A0B\\u4E2D\\u7684\\u5171\\u4EAB\\u4F9D\\u8D56\\u7ED9\\u5904\\u7406\\u4E0B\\uFF0C\\u4E00\\u5B9A\\u7A0B\\u5EA6\\u4E0A\\u907F\\u514D\\u91CD\\u590D\\u6253\\u5305\\u95EE\\u9898\\uFF08\\u8FD9\\u4E00\\u6B65\\u53EF\\u80FD\\u6CA1\\u6709\\u5FC5\\u8981\\uFF0C\\u4E0D\\u8FC7\\u8FD9\\u91CC\\u8FD8\\u662F\\u52A0\\u4E0A\\uFF09\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u53EF\\u4EE5\\u7528 esbuild-loader\\uFF0C\\u6216\\u8005 swc \\u52A0\\u901F\\u7F16\\u8BD1\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7136\\u540E webpack \\u7F16\\u8BD1\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5728 output \\u6587\\u4EF6\\u5939\\u5C31\\u80FD\\u5F97\\u5230\\u6211\\u4EEC\\u7684 remote \\u7684\\u4E1C\\u897F\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const webpackConfig = {\\n\\xA0 \\xA0 entry: path.join(__dirname, './webpack/index.js'),\\n\\xA0 \\xA0 output: {\\n\\xA0 \\xA0 \\xA0 path: remoteEntryPath, // \\u8BBE\\u4E3A public \\u76EE\\u5F55\\n\\xA0 \\xA0 \\xA0 filename: \\\"index.bundle.js\\\",\\n\\xA0 \\xA0 },\\n\\xA0 \\xA0 // mode: \\\"development\\\",\\n\\xA0 \\xA0 // devtool: 'source-map',\\n\\xA0 \\xA0 cache: {\\n\\xA0 \\xA0 \\xA0 type: 'filesystem',\\n\\xA0 \\xA0 \\xA0 cacheDirectory: webpackEntryPath,\\n\\xA0 \\xA0 \\xA0 buildDependencies: {\\n\\xA0 \\xA0 \\xA0 \\xA0 config: Object.values(exposes)\\n\\xA0 \\xA0 \\xA0 }\\n\\xA0 \\xA0 }, \\n\\xA0 \\xA0 module: {\\n\\xA0 \\xA0 \\xA0 rules: [\\n\\xA0 \\xA0 \\xA0 \\xA0 {\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 test: /\\\\.(js|mjs|jsx|ts|tsx)$/,\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 use: [\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 {\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 loader: require.resolve('esbuild-loader'),\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 options: {\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 loader: 'tsx',\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 target: 'esnext',\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 },\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 },\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 {\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 loader: require.resolve('./import-to-remote-loader.js'),\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 options: {\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 type: 'remote',\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 }\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 }\\n\\xA0 \\xA0 \\xA0 \\xA0 \\xA0 \\xA0 ],\\n\\xA0 \\xA0 \\xA0 \\xA0 },\\n\\xA0 \\xA0 \\xA0 ]\\n\\xA0 \\xA0 },\\n\\xA0 \\xA0 plugins: [\\n\\xA0 \\xA0 \\xA0 new ModuleFederationPlugin({\\n\\xA0 \\xA0 \\xA0 \\xA0 name: \\\"prebundle_remote\\\",\\n\\xA0 \\xA0 \\xA0 \\xA0 filename: \\\"remoteEntry.js\\\",\\n\\xA0 \\xA0 \\xA0 \\xA0exposes: exposes, // './dayjs': 'E:\\\\\\\\u-codes\\\\\\\\hola\\\\\\\\static-sites\\\\\\\\node_modules\\\\\\\\.pnpm\\\\\\\\dayjs@1.11.8\\\\\\\\node_modules\\\\\\\\dayjs\\\\\\\\dayjs.min.js'\\n\\xA0 \\xA0 \\xA0 \\xA0// \\u5F00\\u53D1\\u73AF\\u5883\\uFF0C\\u76EE\\u524D\\u4E0D\\u8003\\u8651\\u5171\\u4EAB\\u4F9D\\u8D56\\uFF0C\\u53EA\\u7528\\u4E86 cjs \\u548C esm\\uFF0C\\u5E94\\u8BE5\\u4E0D\\u4F1A\\u51FA\\u73B0\\u91CD\\u590D\\u6267\\u884C\\u7684\\u6A21\\u5757\\n\\xA0 \\xA0 \\xA0 \\xA0// shared: ['react', 'react-dom']\\n\\xA0 \\xA0 \\xA0 }),\\n\\xA0 \\xA0 ]\\n\\xA0 }\\nawait new Promise((resolve, reject) => {\\n\\xA0 \\xA0 webpack(remoteWebpackConf, (err, stats) => {\\n\\xA0 \\xA0 \\xA0 if (err || stats.hasErrors()) {\\n\\xA0 \\xA0 \\xA0 \\xA0 reject(err || stats.toJson().errors)\\n\\xA0 \\xA0 \\xA0 } resolve()\\n\\xA0 \\xA0 })\\n\\xA0 })\\n\")), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u8010\\u5FC3\\u7B49\\u5F85\\u4E0B\\uFF0C\\u7F16\\u8BD1\\u5DE5\\u4F5C\\u6839\\u636E\\u4F60\\u9879\\u76EE\\u4E09\\u65B9\\u4F9D\\u8D56\\u591A\\u5C11\\u6709\\u4E0D\\u540C\\u7684\\u65F6\\u95F4\\uFF0C\\u597D\\u5728\\u8FD9\\u4E9B\\u7F16\\u8BD1\\u5DE5\\u4F5C\\u4EE5\\u540E\\u53EF\\u80FD\\u5C31\\u7701\\u4E0B\\u4E86\\uFF0C\\u53EA\\u4E0D\\u8FC7\\u4F60\\u9700\\u8981\\u6839\\u636E\\u81EA\\u5DF1\\u9879\\u76EE\\u4F9D\\u8D56\\u53D8\\u52A8\\uFF0C\\u7F13\\u5B58\\u6216\\u8005\\u8DF3\\u8FC7\\u7F16\\u8BD1\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"// output \\u6587\\u4EF6\\u5939\\u5C06\\u4F1A\\u51FA\\u73B0\\u6211\\u4EEC\\u6240\\u9700\\u7684\\u6587\\u4EF6\\uFF0C\\u6839\\u636E\\u4E0D\\u540C\\u7684\\u914D\\u7F6E\\u53EF\\u80FD\\u76EE\\u5F55\\u4E0D\\u540C\\n./remoteEntry.js\\n./157.index.bundle.js\\n// mode: \\\"development\\\" \\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u4E0D\\u4F1A\\u88AB\\u538B\\u7F29\\u5904\\u7406\\uFF0C\\u6587\\u4EF6\\u540D\\u4E5F\\u6709\\u53EF\\u8BFB\\u6027\\n./_prebundle_bundles_dayjs_a1fc7db8_js.index.bundle.js\\n\")), mdx(\"p\", null, \"\\u7136\\u540E\\u5C06\\u8FD9\\u4E9B\\u6587\\u4EF6\\uFF0C\\u653E\\u5230\\u6211\\u4EEC\\u9879\\u76EE\\u7684 public \\u6587\\u4EF6\\u5939\\u4E2D\\uFF0C\\u6216\\u8005\\u4FEE\\u6539\\u4E00\\u4E0B webpack-dev-server \\u8BA9\\u6211\\u4EEC\\u7684\\u76EE\\u6807\\u9875\\u9762\\u76F4\\u63A5\\u8BF7\\u6C42\\u5230\\u8FD9\\u5806\\u6587\\u4EF6\\u5C31\\u884C\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E00\\u6B65\\u4EA7\\u51FA\\u7684\\u4E1C\\u897F\\u76EE\\u7684\\u5728\\uFF1A\\u5728\\u8FD9\\u4E2A\\u76EE\\u5F55\\u91CC\\u9762\\u662F\\u6211\\u4EEC\\u5DF2\\u7ECF\\u7528 webpack \\u7F16\\u8BD1\\u597D\\u7684\\u9879\\u76EE\\uFF0C\\u8FD9\\u4E2A\\u9879\\u76EE\\u914D\\u7F6E\\u4E86 remote \\u5171\\u4EAB\\u4F9D\\u8D56\\uFF0C\\u66B4\\u9732\\u51FA\\u6765\\u7684\\u5171\\u4EAB\\u6A21\\u5757\\u662F\\u6211\\u4EEC\\u6240\\u4EE5\\u9700\\u8981\\u7684\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u3002\"), mdx(\"p\", null, \"\\u6211\\u4EEC\\u7684\\u8FDC\\u7AEF\\u6A21\\u5757\\u5DF2\\u7ECF\\u51C6\\u5907\\u597D\\u4E86\\uFF0C\\u4E3B\\u5E94\\u7528\\u4E5F\\u9700\\u8981\\u989D\\u5916\\u5904\\u7406\\u3002\"), mdx(\"h4\", null, \"5. \\u4E3B\\u5E94\\u7528\\u5904\\u7406\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u4FEE\\u6539\\u4F9D\\u8D56\\u5F15\\u7528\\u8DEF\\u5F84\")), mdx(\"p\", null, \"\\u4E3B\\u5E94\\u7528\\u4F7F\\u7528\\u5B50\\u5E94\\u7528\\u91CC\\u9762\\u7684\\u6A21\\u5757\\uFF0C\\u4E0D\\u518D\\u80FD\\u76F4\\u63A5\\u5F15\\u7528\\u4E86\\uFF0C\\u9700\\u8981\\u589E\\u52A0 remote \\u524D\\u7F00\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// \\u76F4\\u63A5\\u5F15\\u7528\\u7B2C\\u4E09\\u65B9\\u6A21\\u5757\\nimport dayjs from 'dayjs'\\n// \\u7528\\u8054\\u90A6\\u6A21\\u5757\\u7684\\u65B9\\u6CD5\\u5F15\\u5165\\u6211\\u4EEC\\u4E4B\\u524D\\u6253\\u5305\\u597D\\u7684\\uFF0Cprebundle \\u662F\\u6211\\u4EEC\\u7684 remote \\u540D\\u79F0\\nimport dayjs from 'prebundle/dayjs'\\n\")), mdx(\"p\", null, \"\\u6240\\u4EE5\\u6211\\u4EEC\\u8FD8\\u9700\\u8981\\u989D\\u5916\\u5904\\u7406\\u6211\\u4EEC\\u4EE3\\u7801\\u91CC\\u9762\\u7684\\u8BED\\u6CD5\\uFF0C\\u4E0D\\u7136 webpack \\u7684 compiler \\u548C runtime \\u662F\\u6CA1\\u529E\\u6CD5\\u77E5\\u9053\\u6211\\u4EEC\\u9884\\u6253\\u5305\\u597D\\u7684\\u6A21\\u5757\\u7684\\u3002\"), mdx(\"p\", null, \"\\u5B58\\u5728\\u4E24\\u79CD\\u65B9\\u6CD5\\uFF0C\\u4E00\\u79CD\\u662F\\u9759\\u6001\\u5206\\u6790\\u6A21\\u5F0F\\uFF0C\\u7EAF\\u6587\\u672C\\u5F62\\u5F0F\\u627E\\u51FA\\u9879\\u76EE\\u6E90\\u7801\\u4E2D\\u7684 import\\uFF0C\\u7136\\u540E\\u66FF\\u6362\\u3002\\u53E6\\u4E00\\u79CD\\u662F\\u5728\\u7F16\\u8BD1\\u9636\\u6BB5\\uFF0C\\u5BF9\\u6A21\\u5757\\u7684\\u53C2\\u6570\\u8FDB\\u884C\\u4FEE\\u6539\\u3002webpack \\u6216\\u8005 babel \\u90FD\\u6709\\u4E30\\u5BCC\\u7684\\u63D2\\u4EF6\\u6216\\u673A\\u5236\\u53EF\\u4EE5\\u505A\\u3002umi \\u901A\\u8FC7 babel plugin \\u63D0\\u4F9B\\u4E86\\u4E24\\u79CD\\u6A21\\u5F0F\\uFF0Ctaro \\u5E94\\u8BE5\\u662F\\u5728 webpack \\u63D2\\u4EF6\\u4E2D\\u9B54\\u6539\\u505A\\u4E86\\u7F16\\u8BD1\\u9636\\u6BB5\\u7684\\u90E8\\u5206\\u3002\"), mdx(\"p\", null, \"\\u6211\\u8FD9\\u8FB9\\u7528\\u7684\\u662F esbuild-loader\\uFF0Cesbuild-loader \\u7528\\u7684 transform \\u65B9\\u6CD5\\u5E76\\u4E0D\\u652F\\u6301\\u63D2\\u4EF6\\uFF0C\\u4E0D\\u8FC7\\u6211\\u4EEC\\u53EF\\u4EE5\\u914D\\u7F6E\\u591A\\u5C42 loader\\uFF0C\\u5728\\u628A\\u6587\\u4EF6\\u4F20\\u7ED9 webpack \\u4E4B\\u524D\\u628A\\u6587\\u4EF6\\u5185\\u5BB9\\u7ED9\\u66FF\\u6362\\u4E86\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// webpack.config.js\\n{\\n\\xA0 test: /\\\\.(js|mjs|jsx|ts|tsx)$/,\\n\\xA0 include: paths.appSrc,\\n\\xA0 use: [\\n\\xA0 \\xA0 {\\n\\xA0 \\xA0 \\xA0 loader: require.resolve('esbuild-loader'),\\n\\xA0 \\xA0 },\\n\\xA0 \\xA0 {\\n\\xA0 \\xA0 \\xA0 loader: require.resolve('./help/prebundle/import-to-remote-loader.js'),\\n\\xA0 \\xA0 }\\n\\xA0 ]\\n},\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// \\u901A\\u8FC7\\u6700\\u7B80\\u5355\\u7684\\u6B63\\u5219\\u66FF\\u6362\\u6765\\u505A\\uFF0C\\u6EE1\\u8DB3\\u4F7F\\u7528\\u4E86\\u76EE\\u524D\\u662F\\nasync function PrebundleModuleRenameLoader(source) {\\n\\xA0 var flattenDeps = readFlattenDeps()\\n\\xA0 if (!flattenDeps) return source\\n\\n\\xA0 const regexes = [\\n\\xA0 \\xA0 new RegExp(`(require\\\\\\\\(['|\\\"])(.*)(.*?['|\\\"]\\\\\\\\))`, 'g'),\\n\\xA0 \\xA0 new RegExp(`(from\\\\\\\\s+['|\\\"])(.*)(.*?['|\\\"])`, 'g')\\n\\xA0 ];\\n\\n\\xA0 regexes.forEach(reg => {\\n\\xA0 \\xA0 let match;\\n\\xA0 \\xA0 while (match = reg.exec(source)) {\\n\\xA0 \\xA0 \\xA0 const before = match[1];\\n\\xA0 \\xA0 \\xA0 const hit = match[2];\\n\\xA0 \\xA0 \\xA0 const after = match[3];\\n\\xA0 \\xA0 \\xA0 if (flattenDeps.indexOf(hit) > -1) {\\n\\xA0 \\xA0 \\xA0 \\xA0 const wrappedTo = `${before}prebundle/${hit}${after}`;\\n\\xA0 \\xA0 \\xA0 \\xA0 source = source.replace(match[0], wrappedTo);\\n\\xA0 \\xA0 \\xA0 }\\n\\xA0 \\xA0 }\\n\\xA0 });\\n\\xA0 return source\\n}\\nexports['default'] = PrebundleModuleRenameLoader;\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u914D\\u7F6E\\u63D2\\u4EF6\")), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u6CA1\\u5565\\u95EE\\u9898\\uFF0C\\u628A\\u5B98\\u65B9\\u6587\\u6863\\u548C\\u793A\\u4F8B\\u770B\\u4E00\\u4E0B\\u4E5F\\u57FA\\u672C\\u4E0A\\u80FD\\u914D\\u51FA\\u6765\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"\\xA0 webpackConf.plugins.push(new ModuleFederationPlugin({\\n\\xA0 \\xA0 name: 'ubug_app',\\n\\xA0 \\xA0 //\\u8FDC\\u7A0B\\u8BBF\\u95EE\\u5730\\u5740\\u5165\\u53E3\\n\\xA0 \\xA0 remotes: {\\n\\xA0 \\xA0 \\xA0 [prebundleNameID]: prebundleNameID + \\\"@\\\" + url + \\\"/prebundle/remoteEntry.js\\\",\\n\\xA0 \\xA0 },\\n\\xA0 \\xA0 shared: [{ react: { singleton: true }, 'react-dom': { singleton: true } }],\\n\\xA0 }))\\n\")), mdx(\"h4\", null, \"6. \\u8FD8\\u6CA1\\u5B8C\\u5462\"), mdx(\"p\", null, \"\\u901A\\u8FC7\\u4E0A\\u9762\\u51E0\\u4E2A\\u6B65\\u9AA4\\u9879\\u76EE\\u80FD\\u591F\\u7F16\\u8BD1\\uFF0C\\u800C\\u4E14\\u4F60\\u4E5F\\u80FD\\u591F\\u770B\\u5230\\u7F16\\u8BD1\\u901F\\u5EA6\\u6709\\u591A\\u5FEB\\uFF0C\\u4F46\\u662F\\u5B9E\\u9645\\u628A\\u9879\\u76EE\\u8DD1\\u8D77\\u6765\\u624D\\u4F1A\\u53D1\\u73B0\\u62A5\\u9519\\u4E86\\u3002\\u6709\\u70B9\\u5751\\u7684\\u70B9\\u5728\\u4E8E\\u8FD9\\u4E2A remote bundle \\u662F\\u4E00\\u4E2A\\u5F02\\u6B65 chunk\\uFF0C\\u8FD9\\u91CC\\u4ED4\\u7EC6\\u60F3\\u4E2A\\u4E09\\u79D2\\u949F...\"), mdx(\"p\", null, \"Module Federation \\u76EE\\u7684\\u662F\\u5E94\\u7528\\u4E4B\\u95F4\\u7684\\u4E92\\u76F8\\u5F15\\u7528\\uFF0C\\u8FDC\\u7AEF\\u7684\\u6A21\\u5757\\u4E0D\\u80FD\\u4F5C\\u4E3A\\u4E3B\\u5E94\\u7528\\u7684\\u76F4\\u63A5\\u4F9D\\u8D56\\uFF0C\\u5927\\u767D\\u8BDD\\u5C31\\u662F\\uFF0C\\u9700\\u8981\\u7528\\u5230\\u8FDC\\u7AEF\\u6A21\\u5757\\u4E0D\\u80FD\\u662F\\u88AB\\u6253\\u5305\\u5230\\u7ACB\\u5373\\u6267\\u884C\\u7684\\u5165\\u53E3\\u91CC\\u9762\\uFF0C\\u53EA\\u80FD\\u5F02\\u6B65\\u52A0\\u8F7D\\u8FDC\\u7A0B\\u7EC4\\u4EF6\\u540E\\u4F7F\\u7528\\u3002\\u6240\\u4EE5\\u8FD9\\u91CC\\u6211\\u4EEC\\u7684\\u4F7F\\u7528\\u573A\\u666F\\u5FC5\\u987B\\u8981\\u5904\\u7406\\u8FD9\\u4E2A\\u5F02\\u6B65\\u7684\\u70B9\\u3002\\u5B98\\u65B9\\u6587\\u6863\\u4E5F\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E9B \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://webpack.js.org/concepts/module-federation/#uncaught-error-shared-module-is-not-available-for-eager-consumption\"\n }, \"\\u65B9\\u6CD5\"), \"\\uFF0C\\u6211\\u4EEC\\u91C7\\u7528\\u6700\\u7B80\\u5355\\u76F4\\u63A5\\u7684\\u989D\\u5916\\u4E00\\u4E2A bootstrap.js \\u7684\\u65B9\\u6CD5\\u6765\\u5904\\u7406\\u8FD9\\u4E2A\\u95EE\\u9898\\uFF0Ctaro \\u7684\\u65B9\\u6848\\u4E5F\\u662F\\u8FD9\\u4E2A\\uFF0C\\u7528 VirtualModule \\u505A\\u4E2A\\u5207\\u6362\\uFF0C\\u628A\\u6574\\u4E2A\\u4E3B\\u5E94\\u7528\\u90FD\\u653E\\u5230\\u5F02\\u6B65\\u91CC\\u9762\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"webpackConf.plugins.push(VirtualModule)\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"\\xA0 VirtualModule.apply(compiler);\\n\\xA0 appIndexJs.forEach((entry) => {\\n\\xA0 \\xA0 const { dir, name } = path.parse(entry.path)\\n\\xA0 \\xA0 // remove suffix\\n\\xA0 \\xA0 const filePath = path.join(dir, name)\\n\\xA0 \\xA0 const originCode = fs.readFileSync(entry.path, { encoding: 'utf-8' })\\n\\n const bootPath = `${filePath}.boot.tsx`\\n\\xA0 \\xA0 VirtualModule.writeModule(bootPath, originCode)\\n\\n\\xA0 \\xA0 const code = 'import(\\\"./' + name + '.boot\\\")'\\n \\xA0 VirtualModule.writeModule(entry.path, code)\\n\\xA0 })\\n\")), mdx(\"p\", null, \"\\u5B8C\\u7F8E\\u5B9E\\u73B0\\uFF0C\\u4E0D\\u9700\\u8981\\u624B\\u52A8\\u4FEE\\u6539\\u81EA\\u5DF1\\u6E90\\u7801\\u91CC\\u9762\\u7684\\u4E1C\\u897F\\uFF0C\\u4E0D\\u8FC7 Webpack5 \\u548C VirtualModule \\u6709\\u70B9\\u4E0D\\u592A\\u5BF9\\u4ED8\\uFF0C\\u4F1A\\u51FA\\u73B0 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/sysgears/webpack-virtual-modules/issues/121\"\n }, \"\\u9996\\u6B21\\u7F16\\u8BD1\\u91CD\\u590D\\u7F16\\u8BD1\"), \"\\u7684\\u95EE\\u9898\\uFF0C\\u867D\\u7136\\u4E0D\\u5F71\\u54CD\\u4F53\\u9A8C\\uFF0C\\u4F46\\u662F\\u4E5F\\u5F88\\u5947\\u602A\\uFF0C\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/andy0130tw/webpack-virtual-modules/blob/24d823f3133da9f397224cdfedd39be341546b21/src/wfs.ts\"\n }, \"\\u624B\\u52A8 hack \\u4E0B\"), \"\\u4E5F\\u53EF\\u4EE5\\u89E3\\u51B3\\u95EE\\u9898\\u3002\"), mdx(\"h4\", null, \"7. \\u5F00\\u673A\\u6210\\u529F\"), mdx(\"p\", null, \"\\u4E0D\\u51FA\\u610F\\u5916\\uFF0C\\u5E94\\u7528\\u6210\\u529F\\u542F\\u52A8\\u4E86\\uFF0C\\u5B9E\\u9645\\u9879\\u76EE\\u6587\\u4EF6\\u91CC\\u9762\\u4E5F\\u80FD\\u591F\\u6B63\\u786E\\u52A0\\u8F7D\\u6267\\u884C\\u6211\\u4EEC\\u7684\\u8FDC\\u7AEF\\u6A21\\u5757\\u4E86\\u3002\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/browser-ab7c5193f0c3b6d70988978677b15028.webp\",\n \"alt\": \"页面请求\"\n })), mdx(\"p\", null, \"webpack \\u7684\\u914D\\u7F6E\\u548C\\u5DE5\\u7A0B\\u5316\\u975E\\u5E38\\u590D\\u6742\\uFF0C\\u5982\\u679C\\u4F60\\u5BF9 chunk \\u6216\\u8005 cache \\u6216\\u8005 optimization \\u6216\\u8005 plugin \\u505A\\u4E86\\u592A\\u591A\\u4ECB\\u5165\\u7684\\u8BDD\\uFF0C\\u6709\\u53EF\\u80FD\\u4F1A\\u51FA\\u73B0\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u9664\\u4E86\\u8BF4\\u7684\\u8FD9\\u4E9B\\u597D\\u5904\\uFF0C\\u8FD8\\u6709\\u4E00\\u4E9B\\u7EC6\\u8282\\u9700\\u8981\\u5904\\u7406\\uFF1Areact\\u548Creact-dom\\u5FC5\\u987B\\u914D\\u7F6E share\\u3001runtimeChunk \\u914D\\u7F6E\\u9700\\u8981\\u5173\\u95ED\\u3001\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u4E2D\\u4E0D\\u89C4\\u8303\\u5F15\\u7528\\u91CD\\u590D\\u6253\\u5305\\u3001\\u975Ejs\\u7C7B\\u6587\\u4EF6\\u9700\\u8981\\u989D\\u5916\\u5904\\u7406\\u7B49\\u7B49\\u3002\\u9664\\u6B64\\u4E4B\\u5916\\uFF0C\\u8FD8\\u8981\\u68C0\\u6D4B\\u4F9D\\u8D56\\u53D8\\u66F4\\uFF0C\\u8BA9\\u7F13\\u5B58\\u5931\\u6548\\u91CD\\u65B0\\u7F16\\u8BD1\\u7B49\\u7B49\\u914D\\u5957\\u529F\\u80FD\\uFF0C\\u4E0A\\u9762\\u4EE3\\u7801\\u91CC\\u9762\\u6CA1\\u6709\\u6D89\\u53CA\\uFF0C\\u4E5F\\u4E0D\\u662F\\u672C\\u6587\\u91CD\\u70B9\\u3002\\u3002\"), mdx(\"p\", null, \"\\u4E0A\\u9762\\u7684\\u6280\\u672F\\u65B9\\u6848\\u6BD4\\u8F83\\u7B80\\u964B\\uFF0C\\u800C\\u4E14\\u5F88\\u591A\\u5730\\u65B9\\u6CA1\\u8003\\u8651\\u5230\\u6216\\u8005\\u6709\\u66F4\\u7B80\\u5355\\u65B9\\u6CD5\\uFF0C\\u6BD5\\u7ADF\\u6574\\u4E2A\\u4F9D\\u8D56\\u6253\\u5305\\u4E5F\\u662F\\u975E\\u5E38\\u590D\\u6742\\u7684\\uFF0C\\u4E3B\\u8981\\u5C55\\u793A\\u7684\\u4E5F\\u662F\\u4E2A\\u601D\\u8DEF\\u3002\\u4E0D\\u8FC7\\u6700\\u7EC8\\u7ED3\\u679C\\u8FD8\\u662F\\u597D\\u7684\\uFF0C\\u8282\\u7701\\u4E86\\u5F00\\u53D1\\u73AF\\u5883\\u7684\\u7F16\\u8BD1\\u65F6\\u95F4\\u548C\\u5185\\u5B58\\u3002\\u81F3\\u4E8E\\u5B58\\u5728\\u7684\\u91CD\\u590D\\u6253\\u5305\\u3001\\u4E0D\\u89C4\\u8303\\u4F9D\\u8D56\\u3001\\u90E8\\u5206\\u914D\\u7F6E\\u5931\\u6548\\u3001\\u7F13\\u5B58\\u63A7\\u5236\\u7B49\\u7B49\\uFF0C\\u540E\\u9762\\u6709\\u9700\\u8981\\u518D\\u4F18\\u5316\\u3002\"), mdx(\"p\", null, \"\\u8DD1\\u4E2A\\u5168\\u90E8\\u9879\\u76EE\\uFF0834\\u4E2A entry \\u7684\\u591A\\u5165\\u53E3\\u9879\\u76EE\\uFF09\\uFF0C\\u65E0\\u7F13\\u5B58\\u548C\\u5E26\\u7F13\\u5B58\\u7684\\u7F16\\u8BD1\\u7ED3\\u679C\\uFF1A\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/first-386bc2564ae89c98866c3be5e492640e.webp\",\n \"alt\": \"无缓存编译\"\n })), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"/second-e052a5bf39e91f8c303a846f006d4b8c.webp\",\n \"alt\": \"无缓存编译\"\n })), mdx(\"h3\", null, \"2.5 \\u66F4\\u597D\\u7684\\u65B9\\u6CD5\"), mdx(\"p\", null, \"\\u4E0A\\u9762\\u7684\\u5B9E\\u73B0\\u6B65\\u9AA4\\u662F\\u7B2C\\u4E00\\u7248\\uFF0C\\u540E\\u9762\\u6839\\u636E\\u66F4\\u5927\\u89C6\\u89D2\\u7684\\u601D\\u8003\\uFF0C\\u91C7\\u7528\\u4E86\\u53E6\\u4E00\\u4E2A prebundle \\u7684\\u65B9\\u6848\\uFF0C\\u66F4\\u89C4\\u8303\\u4E5F\\u66F4\\u901A\\u7528\\uFF0C\\u4E0D\\u8FC7\\u9879\\u76EE\\u590D\\u6742\\u5EA6\\u7A0D\\u9AD8\\uFF0C\\u66F4\\u65B9\\u4FBF\\u540E\\u671F\\u4ECE webpack \\u8F6C esbuild \\u65B9\\u6848\\uFF0C\\u4E5F\\u4E0D\\u662F\\u4E00\\u7BC7\\u6587\\u7AE0\\u80FD\\u8BF4\\u5B8C\\u7684\\uFF0C\\u6709\\u65F6\\u95F4\\u518D\\u53E6\\u5F00\\u7CFB\\u5217\\u8BA8\\u8BBA\\u3002\"), mdx(\"p\", null, \"\\u540C\\u65F6\\u4E1A\\u5185\\u4E5F\\u70ED\\u706B\\u671D\\u5929\\u7684\\u628A\\u5DE5\\u5177\\u94FE\\u671D\\u7740 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"rust\"), \" \\u65B9\\u5411\\u8F6C\\uFF0C\\u6211\\u5F88\\u770B\\u597D\\uFF0C\\u7B49\\u5927\\u5382\\u6709\\u4E86\\u9636\\u6BB5\\u6027\\u6210\\u679C\\uFF0C\\u6211\\u4E5F\\u5F88\\u613F\\u610F\\u5728\\u8FD9\\u4E2A\\u9879\\u76EE\\u4E2D\\u5C1D\\u8BD5\\u4E00\\u4E0B\\u3002\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u6700\\u540E\\u601D\\u8003\"), mdx(\"p\", null, \"esbuild \\u4E4B\\u7C7B\\u7684\\u5DE5\\u5177\\uFF0C\\u9884\\u7F16\\u8BD1\\u4E4B\\u7C7B\\u7684\\u601D\\u8DEF\\uFF0C\\u8FD9\\u4E9B\\u4E1C\\u897F\\u597D\\u4E0D\\u597D\\u7528\\uFF1F\\u6211\\u53EA\\u80FD\\u8BF4\\u771F\\u9999\\uFF0C\\u4F46\\u662F\\u4F60\\u9879\\u76EE\\u7684\\u81A8\\u80C0\\u901F\\u5EA6\\u548C\\u5F00\\u53D1\\u4F53\\u9A8C\\u51FA\\u73B0\\u95EE\\u9898\\u4E86\\uFF0C\\u8FD9\\u4E9B\\u4E1C\\u897F\\u53EF\\u80FD\\u5E76\\u4E0D\\u662F\\u6838\\u5FC3\\u95EE\\u9898\\uFF0C\\u603B\\u6709\\u66F4\\u597D\\u66F4\\u5FEB\\u7684\\u5F00\\u53D1\\u5DE5\\u5177\\u3002\"), mdx(\"p\", null, \"\\u89C4\\u8303\\u7684\\u5F00\\u53D1\\u3001\\u4E13\\u4E1A\\u7684\\u534F\\u4F5C\\uFF0C\\u5408\\u7406\\u7684\\u9879\\u76EE\\u5206\\u9694\\u3001\\u6070\\u5F53\\u7684\\u5206\\u5305\\u548C\\u5E95\\u5C42\\u5E93\\u63D0\\u53D6\\uFF0C\\u8DB3\\u591F\\u7684\\u5F00\\u53D1\\u5BBD\\u5BB9\\u5EA6\\u548C\\u6280\\u672F\\u503A\\u6E05\\u7406\\uFF0C\\u8FD9\\u4E9B\\u90FD\\u662F\\u5F00\\u53D1\\u4E2D\\u9700\\u8981\\u91CD\\u89C6\\u7684\\u4E1C\\u897F\\uFF0C\\u4E0D\\u80FD\\u6307\\u671B\\u7740\\u51E0\\u884C\\u4EE3\\u7801\\u80FD\\u89E3\\u51B3\\u4F60\\u9879\\u76EE\\u7684\\u65E0\\u9650\\u81A8\\u80C0\\u3002\"), mdx(\"p\", null, \"\\u5171\\u52C9\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}